Image link not functioning

I’ve tried to insert an image into my html for a project that I’m attempting to complete on my own computer using Visual Studio Code. It should be a straightforward task, using the element to render an image in my own project files. However, my webpage doesn’t render it, or even leave space for the element on the page. It’s as if my image element doesn’t exist.

Here is a screenshot of my text-editor, which shows my html code as well as the file structure (in case there’s something wrong with my file path).

Here’s a screenshot of my webpage, as it is displaying from the above code:

Can someone tell me what I’ve forgotten? How do I get the image I’ve linked on Line 6 to render on my webpage?

try, ./resources/images/dunce.png

Maybe you forget the dot


You seem to be opening the HTML file using “Open with” I have done this before and most of the times it doesn’t display the images or css content. To be able to view your image and etc, make sure to get the vs code extension “Live Server”.

After this extension is installed, right click on the vs code html file and open it with live server and you should be able to see your images and contents with no issues.

Hope it works for you! :slight_smile:

Thanks @muhammadiqbal7443589, this seemed to be exactly my mistake, I was missing a key period mark!

And thank you, @brailyguzman, I’ll definitely install that for the future!