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.

Same Folder
Place both the .html document as well as the image file into the same folder.

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">
IMG Tag
Enter the IMG tag to insert the image. Use the src attribute to define the path of the image file.

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.

Go Live
Left-click on the Go Live button.

You’ll notice the image in the output.

Output
Output of our HTML code.

Join the conversation

Leave a Comment