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-gani.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.