Assets not loading without trailing slash

Question

My website directory structure:

/
index.html
projects
project1
index.html
styles.css
script.js

And in this case when I go to "https://name.vercel.app/projects/project1" without a trailing slash at the end, the HTML loads but not the css and js files so the page is all messed up. But when I add a trailing slash like "projects/project1/" then it works fine.

As I checked resources tab, I see it's trying to link the files from projects/styles.css instead of projects/project1/styles.css so the browser is probably misinterpreting project1 as a file instead of a folder.

I'm using Vercel which has redirects/rewrites.

Is there a way to make it work properly without trailing slash without using: redirects/rewrites or absolute paths for linking the script/stylesheet files?

Answer 1

Ah ic. specifying a base path in ur html should help:

https://www.w3schools.com/tags/tag_base.asp

Answer 2

Please provide relevant lines in ur code which u use to include the assets/styles. And a relevant config file if ur deployment has one.

Answer 3

I didn't setup a config file and I'm sure there's none.

I link them directly like this: <link rel="stylesheet" href="styles.css">

Tho I also tried "./styles.css" but that didn't work either.

BTW PLEASE READ:

I checked resources tab in inspect and I see the browser is interpreting project1 has a file when used without a trailing slash at the end. So the browser is trying to link projects/styles.css, even though it should actually link projects/project1/styles.css

Answer 4

Yes but that still uses absolute paths like "/projects/project1/" and like I said, I don't want that. I still want to keep using relative paths for linking the css or js files like Iam now(using "styles.css" or "./styles.css")

Answer 5

Ace if you set base path, the relative paths should be relative yo that base path, which should fix ur problem. So ur styles/js paths, etc are still relative.