How do I write the proper file path for an image src?

Viewed 20
<div class="features__column">
    <img class="features__image" src="" alt="Side view of F+F Watch">
</div>

In the code above, I'm trying to insert an image that exists in the same folder, but not in the same sub folder as the hmtl file. So the path would be mainfolder/image/code/htmlfile.

However, writing the file path for the image isn't working (at least I'm not seeing my image when I update the live view), so I'm confused as to what I might being doing wrong.

Update: I've since realized that I wasn't paying attention to how my folder is structured in VS Code. I was able to figure out that my image needed to be written as /image.png.

1 Answers

A single dot represents the current directory, while a double dot represents the parent directory.

./ == current directory
../ == parent directory

Assume you have an image file in the parent directory called "image.png."

You can access it by using the ../ format, so the source value would look like this. ../image.png

<div class="features__column">
    <img class="features__image" src="../subdirectory/image.png" alt="Side view of F+F Watch">
</div>
Related