How to Insert an Image in HTML Using Visual Studio Code

The following guide explains how to insert an image in HTML using Visual Studio Code.

Step 1: Put both files in the same folder

Move both the image and the .HTML document into the same folder. I have an image file named demo.png as well as an index.html file in my project folder named Test.

Step 2: Insert the image into the HTML code

First, open your HTML code on Visual Studio Code. It’s time to add our image within our code.

We will use the <img> tag to insert the image. Enter the following code inside the body tag (or where you want the image to be displayed):

<img src="name of the image with extension">

In my case, the code will be:

<img src="demo.jpg">

Next, save the file by pressing Ctrl + S.

Step 3: Run the program

Finally, we want to see our image displayed.

Click on Go Live on the bottom-right of the code console.

You’ll notice the image in the output.