I’m creating a personal project but for some reason, when adding the images to the website, they aren’t appearing. However, when I click on them individually within the explorer in VS Code, the images show up, so I know that they’ve been added in.

For context as well, the images were originally taken from my OneDrive and just dragged into the relevant location within the project. I am also using the live server VS Code extension.

The code segment in question is below:

<div class="image-container">
               <img src="car-images/gr3/BMW_M6_Tokyo_Expressway_-_East_Clockwise_#1.jpeg" alt="A BMW M6 driving on Toyko Expressway">
               <img src="car-images/gr3/Ford_GT_Tokyo_Expressway_-_East_Clockwise_#1.jpeg" alt="A Ford GT driving on Toyko Expressway">
               <img src="car-images/gr3/Ford_GT_Watkins_Glen_Long_Course_#1.jpeg" alt="A Ford GT driving on the Watkins Glen Long Source">
               <img src="car-images/gr3/Lexus_Daytona_Road_Course_#1.jpeg" alt="A Lexus RCF driving on the Daytona Road Course">
            </div>

And where they are within the project structure are here:

The file structure of the project

From running my code through HTML validators, no spaces are missing from the files at present (though they were before, which is what I originally thought the issue was so they were updated), so I am only assuming it is a path issue, but I can’t figure out why. The folder with the images is a subdirectory of another folder that should be able to be seen when using the correct src file path (hence why there is no ‘../’ before the folder in question).

It could just be something really silly that I’m missing, or the way I’m trying to set up the structure of my project because, in previous projects I’ve done, this hasn’t been an issue.