Issue with Relative Paths When Deploying a Site on Vercel

(edited)

I’m encountering a problem with relative paths when deploying my website via Vercel. For example, my site’s files are located at example.com/folder/index.html. Within this file, I reference an image in the same directory using ./img.jpg. However, after deploying the site, the image fails to load. The browser’s network tab shows the image path as example.com/img.jpg, even though the correct path should be example.com/folder/img.jpg based on the relative path.

This issue only occurs on Vercel. When testing locally, the image loads correctly. Additionally, deploying the same repository to GitHub Pages (e.g., username.github.io) also works as expected—the relative paths resolve properly. It seems Vercel is handling the path resolution differently.

Has anyone encountered similar behavior? I build a test website on https://test1-pi-rosy.vercel.app, you can view the source code.

-------------------------------UPDATE-------------------------------

I'm sorry, I should show two link. The root like this:

.
├── folder
|   ├── index.html
|   └── img2.jpf
├── index.html
└── img1.jpg

In this link https://test1-pi-rosy.vercel.app，two picture can load correctly. (./img1.jpg and ./folder/img2.jpg) But in this link https://test1-pi-rosy.vercel.app/folder，the second picture cant load, because it use relative path (../img1.jpg ✅ and ./img2 ❌)

Vercel Staff

Hi , thanks for explaining the problem. The link you shared shows both images correctly. Can you share an example where the images are not loaded correctly?

Also, I'd recommend using /folder/img.jp instead of ../ or ./ to ensure the browsers know the exact URL of the image relative to your root domain.

I'm sorry, I should show two link. The files path like this:

.
├── folder
|   ├── index.html
|   └── img2.jpf
├── index.html
└── img1.jpg

Vercel Staff

Hi , thanks for sharing the information.

But as I said the URL generated by the browser is not as you expect them.

Image one: https://test1-pi-rosy.vercel.app/07dfbeefc5c24ec97270bad55d429d90.jpg loads because it is at the root.

Image two: https://test1-pi-rosy.vercel.app/5uIvh6olQDAWXnWxZcyGlKKk.png doesn't load because it is not at the root.

Hence, I'd recommend you to use paths starting at the root of the website. See how using a /folder/img2 path worked as expected:

Using absolute paths

Whenever in doubt, check how the browser is interpreting the image url by hovering over the src in the devtools.

This topic is closed. It no longer accepts new replies.

Has anyone encountered similar behavior? I build a test website on https://test1-pi-rosy.vercel.app, you can view the source code.

-------------------------------UPDATE-------------------------------

I'm sorry, I should show two link. The root like this:

.
├── folder
|   ├── index.html
|   └── img2.jpf
├── index.html
└── img1.jpg