Member Avatar for HLA91

Hi
I posted a thread similiar to this earlier and it worked for one pic i uploaded.
I tried uploading some others and they look fine when viewing them from the hard drive but when i upload them i get an empty square. this is the code i have marked the picture codes in bold.

[<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"
         "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
  <head>
<p><font size="5">Fran is Bi</p></font>
<p><font size="5">Aldo fancies India</p></font>
<p><font size="5">Julia fancies Omer</p></font>
<p><font size="5">Alexandra fancies Mr Roberts</p></font>
<p><font size="5">India is Bi</p></font>
<p><font size="5">Wooshi fancies Guff</p></font>
<img src="wooshie.gif" width="130" height="120" border="0">
<p><font size="5">Omer fancies Florence who left</p></font>
<img src="omer.gif" width="130 height="120 border="0">
<p><font size="4">

Please contact me at email address removed.
HLA, Chief Designer]

What is going wrong
Thanks

HLA91

  • 5 Contributors
  • 5 Replies
  • 123 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #114696

Dani AI

Generated

Quick diagnosis: the HTML shown contains a malformed <img> attribute string (missing quotes around attributes), which commonly breaks that tag so the browser shows an empty box. Other frequent causes are a wrong/missing src path after upload, case differences between local filenames and the server, or server-side problems (permissions or wrong MIME type).

Recommended checks to isolate the issue:

  • Inspect the page source and confirm each <img> attribute is properly quoted and closed; a single missing quote can invalidate the whole tag.
  • Open the image URL from the page source directly in a browser and confirm it returns the image (not a 404 or error page).
  • Use the browser Network panel to see the image request status (404 = wrong path, 403 = permissions, 200 with wrong Content-Type = server config).
  • From a terminal run a header check such as:
curl -I https://www.example.com/path/omer.gif

Server-side checklist: verify the file was uploaded to the same folder the page expects, confirm exact filename casing (Linux hosts are case-sensitive), set file permissions so the web server can read the file (commonly 644 for files, 755 for folders), and ensure the server serves the correct MIME (image/gif).

Modern, safe markup includes an alt attribute and properly quoted attributes; keeping names simple (no spaces/special chars) avoids surprises. This advice complements on paths, on testing full URLs, on relative/absolute usage, and ’s tutorial link. For reference on correct markup and devtools debugging see HTML img element and Network panel — Chrome DevTools.

Recommended Answers

All 5 Replies

Member Avatar for tgreer

Are the images in the same folder as the HTML? You need to provide a path to the images. Please research [search]relative paths[/search], [search]absolute paths[/search], and the [search]base href[/search] property.

Member Avatar for josephfrancis

Hello,

See this --> <img src="omer.gif" width="130 height="120 border="0">


replace with <img src="http://www.mywebsite.com/omer.gif" width="130 height="120 border="0">


then check http://www.mywebsite.com/omer.gif comes up in your web browser.

The best rules to abide with are:

1. Upload your images first via ftp to your server
2. Use the full image path like my example.

If they appear in your browser they should appear in your webpage.

Good Luck with it

Joe

Member Avatar for katarey

Hi there,

Well your both post are similar, for answer you should review the you last post,

ok here the some examples:-

img tag

<img src="Location of you Image" alt="alternate text" border="0" />

Examples 1:

When the HTML Page and the image in same folder

<img src="image.jpg" alt="My Image" border="0" />

Examples 2:

When the HTML Page in root of website and the image in folder name images which is in root website,

<img src="/images/image.jpg" alt="My Image" border="0" />

First “/” represent the root
“Images” represent the folder where the image is stored/saved
“image.jpg” its name of image

Best regards
Rahul Dev

Member Avatar for josephfrancis

Hello with my years of experience i have learnt its best to:

1. Upload your images first to your server
2. Use the full image path
3. Use a qaulity program Like Namo Web Editor, add an image and provie the url of the image.

All you need to do then is upload your webpages and you don't have to worry about anything else.

Good Luck with it

Joe

Member Avatar for Member #114696

this is a good page which may tell you how to put an image and all those relative, absolute paths.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.