From time to time, I receive questions from visitors using either the Nvu or KompoZer web editor about why their images or photos do not show up on their web page. These webmasters have created their pages using the free web editor, included pictures on their pages, and published those pages, only to find a broken image icon in their browser in place of the actual images. This tutorial explains how you can fix those problems.
The problem is caused by different factors, possibly triggered in some cases by bugs in Nvu and KompoZer and in others by user-error. I try to avoid those bugs in my tutorials on KompoZer and Nvu, so if you have not actually created a website yet and are just reading this article out of curiosity, you may want to use my guides.
There are two basic reasons why you see a broken image icon in place of your actual picture on your site:
This often happens if you don't publish your page at the very beginning so Nvu / KompoZer does not know the real web address (ie, URL) of your website. The web editor will then insert a link pointing to the image on your computer's hard disk instead of your website.
If the image files were somehow not uploaded by Nvu or KompoZer to your website, then the links to those pictures on your web page will point to nowhere, leading to the broken image placeholder.
It is even possible that both these reasons are true at the same time.
There are two parts to repairing the missing graphics problem.
Open your web page in Nvu or KompoZer. For each image on your page, right click the image and select "Image Properties" from the menu that pops up.
Look at the field for "Image Location". If you see a location that begins with "file:///", it means that
your web page points to the images on your own computer's hard disk instead of on your website. In theory, Nvu and
KompoZer should change these references to relative URLs like
name-of-your-picture.jpg or folder-name/name-of-your-picture.gif when you publish your site.
Since you're reading this troubleshooting guide, you will already know that this doesn't always work correctly, particularly
if you don't publish your page prior to inserting an image.
Essentially, you will have to change these references manually to point to the correct location. If you placed all your
images in a folder called "images" in the main directory of your website, then change the location to
http://www.example.com/images/your-image-name.gif. You should of course change "www.example.com"
to your real domain name,
"images" to your real folder name, and "your-image-name.gif" to the real filename of your graphic.
Do this for every image on your site.
Incidentally, if none of your images contain locations that begin with file:///, it's possible that the
links are already correct. In that case, just move on to the next step.
The next thing you need to do is to upload your pictures to your website. Since the web editor appears to have failed to do so, either because of a bug or an error on your part, you will have to do this manually.
The best way is to use a program known as an FTP client. This is a special program that allows you to connect to your website's directories directly, look at what's there, upload new files, delete files and so on. As a webmaster, knowing how to use an FTP software is an invaluable skill, since you'll sometimes need to do more things with your site than a web editor will allow you. (For example, neither Nvu nor KompoZer provides a facility for you to delete files on your site.)
If you don't know how to use an FTP program, please see the guide How to Upload a File to Your Website Using the FileZilla FTP Client. Use the guide to upload your pictures to your website.
Be sure to put the images in the correct folders on your site when you do.
Although some new webmasters don't like the sequence of steps I take in my beginner KompoZer tutorials and beginner Nvu guides, there is actually a method to the madness.
The tutorials make you publish your web page even before you have much useful content on it. In particular, the pages get published even before a single image or normal link is placed on it. Although this is not a foolproof method to avoid problems, it seems to help to avoid broken links being created by those web editors.
Nvu and KompoZer's linking and publishing facility are not particularly sophisticated. They can easily fail for inexplicable reasons or not do the (humanly) obvious in other situations. As such, even though it may make you cringe to upload a near-empty web page to your site when you start, you should consider doing it to minimize the broken images and links problem. It's not guaranteed to eliminate the problem completely though, so you should still check your website after publishing.
Copyright © 2008-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
