@nathaliaif
Posted
Hey! Congrats on finishing the challenge!
If you add a dot '.' in front of your path, like this: ./assets/images/illustration-empty.svg
, or remove the first slash in your path: assets/images/illustration-empty.svg
, the image will appear again.
The dot and the 'assets/images/...' means "current directory", so the browser looks for the 'assets' directory relative to the current location of the HTML file.
Using the slash '/' in front of the path tells the browser to look for the 'assets' directory starting from the root folder (the root of your website), which locally works, because the root is where your index.html is in your folder. However, in a deployed environment, your project might be hosted under a subdirectory or subfolder, and the browser won't be able to find your image from there.
I found a StackOverflow post that explains it better. And here's another link that talks a bit more about file paths.
Marked as helpful