CODEWITHSUNDEEP
htmlimage
Andy Vibert
Andy Vibert

Reputation: 11

How do I add an image to an HTML file?

I saved an image to my computer in a folder called "images" and then tried to add it to an html page using the img tag (<img src="images/app.png" alt="problem">).

When I do this, it cannot find the image, and instead posts the alt text. When I try using images from the internet, it works fine, but when I try to reference images saved on my computer, it doesn't work. Only potential problems I can think of are that there more than than 1 folder called images on my computer, or that I need to put something more in src (the images folder is in another folder, in the documents folder). Anyone have any idea what I am doing wrong?

Upvotes: 1

Views: 16738

Answers (2)

Robin
Robin

Reputation: 2723

A good practice is making a folder for each website you'll make. In that folder you put your .html files along with an img, js and css folder. In the img folder you can put your images, css in the css folder and javascript in the js folder.

So your file tree would look like this

your website - index.html - img - picture.jpg

and your img tag like this:

<img  src="img/mypicture.jpg" alt="My picture" />

Upvotes: 3

Sujay sreedhar
Sujay sreedhar

Reputation: 3518

If the file structure is like this 

|->webpage.html
|->images
      |->my_image.jpg

your HTML would be like this 

<img src="images/my_image.jpg">

if the web page is in a folder

|->myhtmlfiles
       |->webpage.html
|->images
      |->my_image.jpg

code will be like 

<img src="../images/my_image.jpg">

Upvotes: 0

Related Questions