I've uploaded an HTML file that contains images, but the images do not display on the uploaded page. What do I need to do?
When an HTML file is set up to display graphics, the graphics are not actually embedded within the file itself. Instead, the file contains links to separate graphics files. To display the graphics on your site, the links to the graphics need to be set up correctly, and the graphics files need to be available on your site at the linked location.
When uploading an HTML file that displays graphics, you should make sure the following requirements are met:
When uploading your graphics file, please be sure the file name contains no spaces or special characters or punctuation. These symbols will be automatically removed when uploading the file, changing the file name. If the name of your graphics file is different from the graphics file name linked within your HTML document, the graphic will not display correctly on the page.
The graphics have been uploaded to your site via your File Management section (as described here).
The links to the graphics in the HTML document correctly lead to the location of the document as it appears on your website. The HTML document should lead only to the file name, not to a location in a particular folder.
You should also be sure that the graphic link in your HTML document does not lead to a location in a folder. For example, if the link leads to:
...it should be modified to lead to:
This will allow the link to lead directly to an uploaded file called filename.jpg.
If you have posted an HTML document and an image does not appear, try right-clicking the broken image icon, then select Properties. The resulting window will provide the location of the current graphic link in your HTML document. If the link is set up to lead to an incorrect file name, or to a file within a folder, you should edit the HTML document to change the graphic link.
Special note on HTML files created in Microsoft Word:
If you use Word's built-in options to convert a Word document into an HTML document, please note that Word will create a new image with a new file name. The HTML document will contain links to this new file name. You may also need to take certain steps to ensure that the graphic links are set up correctly - see below:
For older versions of Word, the graphic files that are generated when doing "Save as HTML" are given names like Img0001.gif and are saved by Word on your workstation in the same directory as the HTML file. If you upload these graphics to your site, the HTML document should display the graphics correctly.
Since Microsoft may re-use filenames, be careful that your image files do not have the same filenames as previously uploaded files. If you upload a file with the same file name as a previously uploaded file, the old file will be replaced with the new file (and any page set to display the old file will display the new file instead).
For newer versions of Word, the generated graphics files are given names like Image001.gif (or .jpg or .png). Again, since Microsoft may re-use filenames when doing "Save As Web Page", be careful that your image files do not have the same filenames as previously uploaded files.
In addition, you should make sure the image files are created in the same directory as your HTML file. To do this:
1) As the you do the following procedure, be sure that the file name that you provide when Saving As Web Page does NOT contain any characters that are illegal in a web address (i.e., contains none of the following: blank space, "\", "/", "<", ">", "*", ":", "?", "#", "&", "@", "|", "%", " ", ",", "'")
2) Select "Save As Web Page" in the File menu.
3) In the resulting "Save As" window, there is a Tools menu in the upper right corner. Click this menu to activate the drop-down list.
4) Select Web Options in the drop-down list in the Tools menu.
5) In the Web Options window, select the Files tab.
6) Uncheck the check box next to "Organize supporting files in a folder". Once this box is unchecked, all graphics files (and other supporting files) will be created with unique filenames when a document is saved. This will allow the uploaded page to link to the files correctly.
You should end up with an HTML file and some uniquely named graphics files in the same folder. You can upload the HTML file and graphics files to your site, and the HTML file should display the graphics correctly.