Adding Images

[vbarhoskie]

Hi all, Pls I just began my journey in HTML. At the moment I am studying the HTML tutorial and have run into a problem with the img tag. I tried implementing the example on my own system but what I get is a place holder with a big red X on my browser, as opposed to the W3 LOGO which the online text editor produced. I even tried using the same syntax to insert a local image on my computer but no success. Pls what is it I am not doing correctly? Here is my code: <img src="w3schools.jpg" width="102" height="142">

[davej]

Your html file is looking for a local image file named w3schools.jpg in the same directory that it is in.

[vbarhoskie]

Thanks Dave, I realised that so I actually tried referencing a local image on my system <img src="mypix.jpg" width="200" height="400">. But the result still remained the same.

[dantezeppelin]

If you are using internet exploder you have to allow blocked content I believe

[Labtec]

Where are your images located? They don't seem to be in the same folder as your HTML file..... Are they in a folder called 'images' by any chance? Regards, L2c.

[thescientist]

Thanks Dave, I realised that so I actually tried referencing a local image on my system <img src="mypix.jpg" width="200" height="400">. But the result still remained the same.

that's the same thing you were doing, it's still going to look in the same place, but just for an image with a different name. what we're trying to determine is the location of the image file relative to your HTML file. using the current path, the browser is expecting that the image file to be in the exact same folder as this HTML file. is that the case? Did you check casing? spelling? extension? Edited January 8, 2013 by thescientist

[vbarhoskie]

guys I am very grateful for all your help. I actually found out that I wasn't properly referencing the image hence the result I was getting. I have gotten the proper reference by using the complete path starting from C: to the very folder where it was stored on the desktop and now the image appeared. Once again I am grateful to you all.

[thescientist]

guys I am very grateful for all your help. I actually found out that I wasn't properly referencing the image hence the result I was getting. I have gotten the proper reference by using the complete path starting from C: to the very folder where it was stored on the desktop and now the image appeared. Once again I am grateful to you all.

i know, that's what we were trying to tell you, but your solution isn't going to translate well if you ever move the site, to a live host, for example. you were better off just trying to fix the path so that is relative to the HTML file the image is being included in, like i was trying to say.

what we're trying to determine is the location of the image file relative to your HTML file. using the current path, the browser is expecting that the image file to be in the exact same folder as this HTML file. is that the case? Did you check casing? spelling? extension?

[Labtec]

For example, lets say your site structure is like this: [mySite]index.htm-->[images] yourImg.jpg-->[css] styles.css--------------------------------------------- Ok, now lets say you are trying to reference an image from your HTML file, you can just write the path like so:

<img src="images/yourImg.jpg" alt="alternative_text" />

NOW, let's say you are trying to reference the image, but from your styles.css file. Because your CSS file is in it's own folder at the same level as the image (in it's own folder), you can't directly write the filepath as we have done above, because if you were to do it from the CSS file, it will search the CSS folder for the directory 'images/' (which as we know doesn't exist). When you reference an image from a file which is in a folder at the same level as the images folder, you have to do this:

background-image: url("../images/yourImg.jpg");

By adding the preceding '../' before the file path, you are basically telling CSS to search the whole site folder, and find the specified directory and image. Like thescientist said, writing the FULL path to the file for your system is bad because once you actually put your site live on a web host, the directories will 9 times out of 10 not match up with the filepath of your image. The best way to reference an image (if it's at any level), is to do what I have done above in the last piece of code, add the '../' before the directory. If you post me an example of your site structure, I will be able to explain it better to you pertinent to your own structure. At this moment in time I am guessing where your HTML/image are located. Hope this helps you understand a little more. Kind regards, Labtec.

Edited January 11, 2013 by Labtec