Where are my Images?                      Other info on displaying images

When creating web pages, one of the most annoying and frustrating parts is to get your images to show when the pages are uploaded to your web server.

If the page is supposed to display an image, but it can’t find the image, a small box with a red X in it will display instead. Following is an example of each; one where the image is found and the next to show you what is shown when it can NOT find the image to display.
     

Possible Causes

The problem usually happens because of the way the location of the image is written into the page.

First, to display an image in html code, you write this:

<img src = “image1.jpg”>

The location of the image is inserted between the quotation marks. The problem arises because the location of the image on your computer and the location on the web server are different. Relative links help you to use the same location both on your computer and the web server.

The link refers to the location of the image on your computer and not the website.

A relative link is a link that is made to a location RELATIVE to the current document. You have to tell the browser how to get to the image from the current webpage. The easiest way is to have the image in the same folder as the image. In that case, if image1.jpg is in the same folder as the webpage, it will be found with the code <img src = “image1.jpg”>.

By using relative links when creating a website on your computer, it will be easier to upload the pages to your website and have the links work properly there.

The path to the image is incorrect.

When you upload your page(s) to your webserver, try to upload the entire folder and all its contents in one step. You can do that with the ftp program smartftp which you can try for free at http://smartftp.com

If the reference to the image is to its location on your computer in you’re My Pictures folder, it will work while the page is on your computer, but it will NOT be found if you upload the page to your webserver because no My Pictures folder exists on the webserver and the webserver can NOT access the folder on your computer.

NOTE: This will STILL probably work for you when you access the page from the same computer, because it will still load the image by getting a copy from your computer. You will think that its OK, but others will not see the image. This error will show in tthe source code for the page as it displays in your browser and you see an image reference like this:

file://C:\Documents and Settings\John\MyPictures\img1.jpg

Try this Plan

So to prevent the problem, create a folder named the same as the folder on your webserver where you were instructed by the Hosting company to place your webpages.

If you aren’t sure, just connect to your website with smartftp or your favorite ftp program and view the folder structure. The folder that your homepage should be placed is probably named httpdocs or public_html or www.

To get your home page to display it should probably be named index.html and be placed in whichever folder above exists on your website. That’s because the web browsers look for a page named index.html and if it is found, they display that as your homepage.

To begin with, use fewer than say ten webpages and place all the webpages and all the images in the default directory (public_html, httpdocs, or www) where you were told to upload your pages. Later, once you see how everything works and you become comfortable with it, you can place the images all into an IMAGES folder or you can have them in whatever subfolder that particular webpage is place into.

If you decide to use images as the name of the folder to hold all your images, just use this html code to display an image there

<img src = “/images/image1.jpg”>

Download practice pages and folders at:

http://dollarware.us/html-starter-pages/

=================================================

Other information about displaying images.

Folders, Directories, Paths and Structures For Search Engines

Display just the image.

You can cause a browser to display just an image if you know the file name and its location:

http://dollarware.us/smalldw45wash.jpg

A Folder is:

Folder is a newer name for a Directory.

A Folder is just an organizational unit which can contains files and other folders.

A Sub-Folder is just a folder that exists in another Folder.

Search Engines like this Directory Structure

Several Search Engine experts suggest that a three level structure is one that the search engines like. It is setup with the top level containing pages for each of from 3 to 5 main subjects. The second level contains pages for 3 to 5 sub-topics for each of the main topics. The third level would be pages for the actual content for all sub-topics.

Folder Names and File Names are Case-Sensitive

Remember that most hosting is done in the Linux operating system in which folder names and filenames are case sensitive, so you have to make sure that the names are consistent. It’s probably a good plan to always use lowercase in naming files and folders.

Placeholder Pages

Hosting is usually setup to display a placeholder page as the homepage until you upload your real homepage. A placeholder page is just something setup so that there is something to see when you first see that the hosting space has been setup for you but before you have had a chance to upload the page that you want as your homepage. It might say that a New Domain Name has just been setup or Under Construction or Website Coming Soon.

View the source code of any page.

To view the source code of any page displayed in your browser, just right-click it and choose View Source from the pop-up menu that will be displayed.

Slashes are used for web based folders and backslashes are used for folders on your computer.

Default Page Works for All Folders

The index.html will display not only for the root folder but for any other folder as well. To display a page without having to type the page name, just create a folder for the page and name it index.html. It will display when the path to the folder is typed into the browser.

../ Moves up a Folder

If you have sub-folders, you may have to know how to move up the directory