This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Build Your Own Webpage Forum

View Course » View Exercise

180 points
5131fe205875288991006eaa_207951255
Submitted by
Bernard R Sizemore
over 4 years ago

Understand the code but the one problem I have comes when I try to insert an picture from my computer.

Basically I understand that there needs to be an web address attributed to the picture. Does that mean that I need an online gallery or is there a file I need to create on my computer that I can pull images into a website?

Here is an example of a site I started working in conjunction with the exercises I have completed to this point:

<!DOCTYPE html>

 <head>
      <title>Southern Wind Photography and Design</title>
 </head>

 <body>
 <h1> Southern Wind Photography and Design</h1>
 <img src='031912CloudRedo.jpg'/>
 </body>

The title as well as the h1 tags appear as they should but not the image.

Appreciate comments and insights!!

B


2 votes

permalink

If you embed an image that's on your local hard drive, only you will be able to see it (someone else visiting your web site – or your Codecademy exercise – from a different computer won't see it), so to actually show a picture on the Web it has to be on the Web and have a URL that starts with http: (use, for instance the free imgur service to upload images).

If you really must, there's a way of referencing local files in your html, too. Just say file://, followed by the full path to your image.
It'll be something like

<img src="file://C:/Documents and Settings/username/Pictures/filename.jpg">

(though I'm not entirely sure about the C:/ part, since I'm not on a Windows machine and your hard drive might have a different drive letter.) – The perhaps easiest way to find out is to just open that image with your browser (using right-click; open with...) – it should show the local file:// url in the address bar.

3117 points
Picture
Submitted by
Alex J
over 4 years ago

1 Comment

5131fe205875288991006eaa_207951255 Bernard R Sizemore over 4 years ago

Thank you! I was able to insert picture as you mentioned by posting on Picasa and then proving the code. Still good though to read an explaintation as to why it is done.


1 vote

permalink

When we "embed" or put an image using the < i m g > tag, we are actually telling the browser to go to a particular address and show the pictures in that address.

So using < img src="http://www.mapleprimes.com/view.aspx?sf=38188/270819/random.org-256.png" /> in our code is telling our browser to

  1. Go to http://www.mapleprimes.com/view.aspx?sf=38188/270819/ and
  2. display the image titled "random.org-256.png"

That image is saved in another computer that is connected to the internet and is designed to be accessed by other PC.


In your case, you want to embed the image from your PC and you typed

< img src='031912CloudRedo.jpg'/>

If you and your browser are talking to each other, it will go like this,

Bernard R. Sizemore aka Bernard: Chrome (or whatever browser you're using) show them my Cloud Picture.
Chrome / Browser: Bernard, I know that you want me to display that image, but I do not where it is located.

Knowing that your browser is too busy doing other things, you have to tell them exactly where to look.
That's what Alex J. The Moderator tried to explain.

He said, that if you really want your Browser to display the image, your code should have the full path. That is, the exact location where the browser needs to go.

< img src="file://C:/Documents and Settings/username/Pictures/031912CloudRedo.jpg" />

Here's a much better way of you talking to your browser.

Bernard R. Sizemore aka Bernard: Chrome show them my Cloud Picture. It is located in C : / Documents and Settings / username / Pictures and the name of the picture that you're supposed to display is 031912CloudRedo.jpg
Chrome / Browser: Right away, Bernard!

Then your browser swiftly go to the room and searched for the picture and it displayed the image!


But another problem arises.

Your house. That is, your hard drive is not accessible. Other web browser will not be able to go to your room where the picture is located.

Back to our conversation sample. This time, we have additional characters, Safari the Browser of your neighbor MAC.

Bernard successfully created a website (Chrome is able to display the cloud picture!) and is eager to show it to his bestfriend MAC.

Bernard went to MAC and told him that he have an amazing website. MAC wanted to see it so they opened Safari.

Bernard typed the website in Safari.

Safari: The title of the page is Southern Wind Photography and Design.

MAC: Wow! The design is awesome! But I cannot see the pictures Bernard. What happened?

Bernard: I don't know why is it like that. It's ok in my PC.

Safari is able to display the design but it cannot display the image because the code that it is reading is intended for Bernard's Hard drive.

< img src="file://C:/Documents and Settings/username/Pictures/031912CloudRedo.jpg" />

Safari is lost.

Easiest, most practical, solution? Bernard needs to upload the image to a website (Picasa ; ) )that every other browser can access.

165 points
3704d79190a46fa563694309362de6f6?s=140&d=retro
Submitted by
Paolo Udarbe
over 4 years ago