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 The Files In The Same Folder

Copy or move the image you want to insert to the same folder as the .html document. 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 in the same folder.

Step 2: Insert An Image In HTML Using Visual Studio Code

We will use the <img> tag to insert the image in the HTML code. 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

Click on the Go Live button on the bottom-right corner of the VS Code.

Go Live
Left-click on the Go Live button.

You’ll notice the image in the output.

Output
This is the output of the demonstration.

Was this article helpful?

Leave a Comment