How do I source an image that is from images sub folder to html subfolder

Question

I'm a beginner in HTML. I have been doing some practicing and testing and found an issue where I could not find an answer online. Basically, in VScode when an image is in a "images" subfolder and the html is not in a subfolder I can just use src="images/image.jpg". But when the HTML is in a subfolder, I tried doing different type of sourcing such as src="Website/images/image.jpg" or src="./images/image.jpg". I understand I can just put the html outside the subfolder, but I am curious what is the reason causing it. Thank you.

Solution or cause why you cannot source an image in a subfolder to another subfolder.

Answer 1

If your HTML file is in a subfolder, let's say pages, within the Website folder, you would need to adjust the path accordingly. Assuming your directory structure is now:

project/
├── Website/
│   ├── images/
│   │   └── image.jpg
│   └── pages/
│       └── index.html

You would need to go up one level (using ../) to reach the Website folder and then navigate to the images subfolder:

<img src="../images/image.jpg" alt="Image">

This tells the browser to go up one level from the pages folder to the Website folder and then enter the images subfolder to find the image.jpg file.