Adding image on vscode

Hello campers, please how do I add image file on vscode.

1 Like

VSCode is a program for editing text files. If you want an image in a folder on your computer, put the image in the folder, VSCode doesn’t care about it.

1 Like

Ok maybe I didn’t word my question very well. I just got my system and I’m learning to add and navigate through files on vscode. So I am trying to code a page with it.

How do I save the image I downloaded on my pc to it(vscode) and add the img src to my html markup?

Hope I made sense now.

You don’t save an image to it. That’s not how files work. You put the file in a folder and in your HTML, for the image src attribute, you write the path to the file. So if it’s in the same folder <img src="./my-image.jpg" />. VSCode does not care what files you have, you don’t save things to VSCode, it’s literally just looking at your filesystem. You add an image to your computer hard drive by downloading it, you tell the HTML image tag where it is by writing the path to that image file relative to where the HTML file is.

VSCode is there to help you write code by providing a nice interface for opening and editing text files that are saved in your computer, it’s not doing anything cleverer than that (there are many, many plugins that expand on VSCodes’s functionality, but that functionality is always just a variation of “edit a text file written a certain way”). The file explorer view just shows the files on your computer that are in the folder that you’re working in, it’s not something special within VSCode. Like if you go to your normal file explorer program on you computer and create a new file, or if you create a file from your terminal, that’s exactly the same as doing it in VSCode. And with an image, if you want to be able to see it in the VSCode file explorer, just put it in the folder that the file explorer is showing

2 Likes