Search code examples
htmlvisual-studio-codevscode-extensions

Image won't show up in html extension in VS Code

I have this code:

<!DOCTYPE html>
<html>
    <head>
        <h1 title="First Heading">Heading 1</h1>
        <h6 title="Second Heading">Heading 2</h6>
    </head>
    <body>
        <p title="First Paragraph">Paragraph 1</p>
        <p title="Second Paragraph">Paragraph 2</p>
        <a href="https://www.w3schools.com/html/html_basic.asp" >W3schools</a>
        <img src="C:\Users\yorda\OneDrive\Gambar\Aseprite\.jpeg\Canyon.jpeg" alt="Pixel Art" width="320" height="180"
    </body>
</html>

If I open my html file via file explorer (double clicking it and go to chrome) it will show the image.

but if I want to preview my html file via VS Code extension the image wont show up.

why is this happen? any way to solve this? Thanks in advance.

Solution

  • You have to put the image in the same location of your index.html file.

    then modify your img src to

    <img src="Canyon.jpeg" />