Adding Images

[brianhyun]

Hi! I'm fairly new to HTML, and I have a question concerning adding images...

 

I'm trying to add an image to my code, but when I open my html file on Safari the image is replaced with a box with a question mark inside of it.

 

<figure>

<img src=“Images/otters.png” alt=“Photograph of a sea otter floating in water” />

<br />

<figcaption>Sea otters are the only marine mammal without a layer of blubber.</figcaption>

</figure>

My html file(above) and the image of the otter are in my desktop folder in a folder named "Images."

The image was acquired from google images and saved to my desktop.

Edited July 28, 2015 by brianhyun

[Ingolme]

It looks like you're using curly quotes for your attribute

 

<img src=“Images/otters.png” alt=“Photograph of a sea otter floating in water” />

 

Perhaps some browsers are forgiving and interpret them as standard quotation marks, but other browsers consider the quotes to be part of the file name.

[brianhyun]

I'm using TextEdit and the quotation marks naturally come as curly.

[Ingolme]

Then you need a different editor. HTML, Javascript and PHP do not work with curly quotes.

 

There are a lot of free code editors out there. I use Notepad++.

[brianhyun]

I downloaded TextMate 2.0, changed the quotation marks, and opened my file on Safari; however, the problem with the image is still occurring.

 

I believe it has to do something with specifying the location of my image relative to my html files.

[Ingolme]

File paths are case sensitive. "Images" isn't the same as "images".

 

Make sure you specified the path correctly.

[davej]

 

My html file(above) and the image of the otter are in my desktop folder in a folder named "Images."

 

If the html file and the image file are both in the same folder then you shouldn't include the folder in the image path.

[brianhyun]

Thank you! That worked...

 

But can you tell me why?

[dauruk0512]

img src=“Images/otters.png”

 

 

src means source where is file located

 

 

images/otters.png <--it direct you to spesific file,

[davej]

If your html file is in the images folder your code says the image is located here: imagesimagesotters.png because paths are relative from the location of the file containing the path. This can become a problem if a path is moved from an html file into a css file in a different folder. Also, as Foxy says, in Linux/Unix the path is case-sensitive.