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