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,169 Points
Tarran Prior
Tarran Prior
Courses Plus Student 3,169 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 the file name like so: 

<img src="myimage.jpg">

If you're interested to learn more about VS Code specifically there's this Intro to VS Code workshop. As for adding images in your HTML I highly recommend checking out Introduction to HTML and CSS.

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! :)