I normally would not cover an issue this basic, but I receive requests almost every week for answers from aspiring (OK, call them newbie) web developers who cannot see the images on their web pages after using FileZilla or another FTP utility to transfer HTML and image files to their web site. Almost all say that all they see is the infamous red X where their images should display.
I can state without any doubt that the issue has nothing to do with FileZilla or any other FTP utility. The problem is that the paths set up in the HTML code to the images you want to display are not correct. Let’s see if we can clear up the mystery with this image and file path tutorial.
All new web site designers and developers initially struggle with this issue. Paths are not very difficult to understand, but they can sometimes be tricky if you have a web site with multiple levels of subdirectories. If you are new to web site development, the best advice I can offer is to keep the structure of your web site as flat you can. A flat web site structure uses only one level of subdirectories, which are each named according to the type of web objects they hold.
For a small web site of perhaps 100 pages or less, all HTML files should reside in the root directory. The root directory is typically called public_html or something similar on your server. For a flat structure, just use one level of subdirectories. Any directory below another directory is a subdirectory. Keep similar web objects in each subdirectory. External CSS files should be placed in the ‘css’ directory, images in a directory called ‘images’ and if you use JavaScript files, place them in a subdirectory called ‘javascript’ or ‘js’. You can name the subdirectories whatever you want, but the name should describe the objects found inside.
missing
Internet Explorer image
Every item on a web page has a path from where the web page is located to where you will find the object.
The issue with paths to images is the same issue with any type of web object that you want to access from a web page. You need to know how to find the object using a proper path and there are multiple ways to do this. It does not matter if it is an image, a CSS file, a JavaScript file or another web page.
missing FireFox image
Two Types of Paths
Two types of paths can be used. One is called an absolute path and the other called a relative path. The relative path is much more commonly used and offers the benefit of making a web site portable, which means that you can use the same paths for several different sites under different domain names. An absolute path locks you into one domain name.
A absolute path includes the full URL to the image you want to display, such as the path to the Internet Explorer broken image symbol shown above.
<img src="https://www.howtohq.com/images/missingimage-ie.gif" />
in the case of the absolute path shown above, the full URL, including the http protocol (http://), the domain name (www.tech-evangelist.com), the image subdirectory (/images/) and the file name (missingimage-ie.gif) are the full URL path to the image. An absolute path doesn’t care where you are in a web site or which page you are currently viewing, but many HTML editors do not like to work with absolute paths.
A relative path is always ‘relative’ to a web page in your site structure hierarchy that is requesting the image. There are several variations that can be used for relative paths. In a simple structure like I recommended above, all HTML pages reside in the root directory, so a simple relative path to the same image used in the example above would be:
<img src="images/missingimage-ie.gif" />
In this case, ‘images’ is a subdirectory of the location where the HTML file is calling the image, so you just include the subdirectory name at the beginning of the path.
Things get a little more complicated when an HTML page resides in a subdirectory. If we add a subdirectory called ‘articles’ and place an HTML page in that directory, the simple relative path to the images directory would not work because the images are no longer in a subdirectory of the directory where the HTML file is located. It is at the same subdirectory level. When creating a path we therefore have to move up one level to the root directory in order to access the ‘images’ directory.
Here is the example. Let’s say the HTML page is in a directory called ‘articles’, the file is named MyDog.html, and you are trying to display an image located in the ‘images’ directory named MyDogSpot.jpg.
The HTML file path would be:
/articles/MyDog.html
The image file path would be:
/images/MyDogSpot.jpg
To move up a directory level, just precede the path with a double-dot and a slash, as in (../). This tells the browser to request a path that starts one level above the location of the HTML page. That image tag path would look like this:
<img src="../images/MyDogSpot.jpg" />
If the HTML page is deeper in the web site and is two subdirectories down from the root directory, as in /articles/october/MyDog.html, then the path to the images subdirectory requires that you first move up two directory levels (back to the root directory) to find the path to the ‘images’ subdirectory.
<img src="../../images/MyDogSpot.jpg" />
When working with web sites with multiple subdirectory levels, always think in terms of moving up to the root directory and then back down the path to the object you want to use or display.
There is also another type of relative path called root relative. A root relative path always starts out at the root directory, so you do not need to move up one or more levels before you start the path to an image or object. When a path starts with a slash, it simply means ‘start out at the root directory’.
<img src="/images/MyDogSpot.jpg" />
How do I access images in the same directory as my web page?
I do not advocate this approach because it creates messy directories that can get very large very fast, which makes it more difficult to find files at some point. The answer is to just not use a path when an image is in the same directory as the HTML page.
<img src="MyDogSpot.jpg" />
I hope this clarifies the issue of finding paths to images. The same rules and techniques apply to forming hyperlinks to access other pages in a web site.
What if the path is correct, but the image still doesn’t display?
The issue may not be related to the path.
- File names for all images on Unix and Linux servers are case sensitive. That means that an image named MyDog.jpg is not the same as mydog.jpg or MyDog.JPG. Make sure that the file name is spelled correctly and all characters are of the proper upper of lower case. This one trips up a lot of newbies.
- You may be using an invalid file name. The only characters that are technically valid for file name on Unix and Linux servers are upper and lower case alphabetic characters, numbers, the underscore, a hyphen and a dot. Spaces, pound signs, slashes, parenthesis, questions marks or any other characters are not valid in either file names or directory names. Some characters may be valid in URLs, but not in file or directory names. People pick up bad habits with file names primarily because Microsoft Windows and Microsoft servers allow you do things that are not valid with other systems. Microsoft has no influence on the way that the Internet is structured or how it runs. Make sure sure that your files and paths use valid characters.
- Paths are different on web servers than they are on your PC. If you are trying to test a web site that you are developing on your PC, it probably will not work correctly. Absolute paths are different on a PC and the root directory is not the same as the root directory on a web server. If you want to test a simple static HTML web site on a PC that is not configured as a server, use relative paths.
- Your HTML editor may be creating incorrect paths to the images subdirectory. Some editors automatically create paths that work on your PC, but will not work on a web server. You will need to look at the code to identify this problem. If you see a path that is not relative or absolute as demonstrated above, the editor may be using absolute paths on your PC, which will not work on a web server. An example would be any image path that starts with a hard drive designation on your PC, such as:
c:\\MyWebProjects\images\missingimage-ie.gifIf you see a path in your code that looks like this, you will have to determine how to configure your editor to use the paths that you choose. The clues are the backslashes and the drive designation (c:).