Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jeff Jones
Jeff Jones
3,928 Points

How to include images in Visual Studio Code HTML

Hi!

Recently, I finished the videos regarding "Adding Images to the Page" in the HTML section of Treehouse. I went onto my editor (Visual Studio Code), though, to try it on my own, and I couldn't figure out how to move a picture from my computer onto the practice website I was trying to build.

Can anyone offer any suggestions?

Thanks!

1 Answer

Tarran Prior
PLUS
Tarran Prior
Courses Plus Student 3,155 Points
Tarran Prior
Tarran Prior
Courses Plus Student 3,155 Points

Hey Jeff!

So assuming you've created a .html document in Visual Studio Code with the necessary markup, you can add images to your own practice page by using the <img> tag. You can then define the location of the image using the "src" attribute within that tag.

For example, if you have a folder named "images" and the image you want to display is named "myimage.jpg" - you would simply add the following.

<html>
<head>
<title>My practice page!</title>
</head>

<body>
<img src="images/myimage.jpg">

</body>
</html>

Keep in mind that in this instance, the .html document should be located in the parent directory of the "images" folder. If the image is located in the same folder as the .html document, you would simply use...

<img src="myimage.jpg">

Hope this helps! Let me know if you have any further questions. :)

Jeff Jones
Jeff Jones
3,928 Points

Thanks, Tarran! I really appreciate it. I'll give it a try and get back to you later if I have any more questions.

Really Helps! :)