Search code examples
javascriptreactjsvercel

can't resolve the image path

Good day guys.

I have a problem in my project related the Not found route. The problem is i have my app hosted on vercel and if you add two routes the image will disappear. For instance, if I would to do baseURL/randomthing - the image will appear, however, if I do baseURL/randomthing/anotherrandomthing the image will disappear. After debbuging I found that the problem is related to the way I import the image.

Code causing error

<img src="./plug-in.png" style={imageStyle} />

If you try to add another "." syntax to the image path ../plug-in.png you will get the image back on the second route and so on.

I tried many things. Any idea why this is happening?

This is the code: github

And this is the app: https://chess-game.vercel.app/

Thanks in advance.

Solution

  • You want to use dynamic paths for your images, for example:

    <img src="/plug-in.png" style={imageStyle} />

    This is because the path ./ will always try to take the file from the same directory that you are currently in, whereas the path / will always target the root directory of the site.

    For example, if you are in the route domain.com/route, the ./ path would look for the image in the domain.com/route/ directory but the path / would look for the image in the domain.com/ directory.