<img> tag stopped working

[RHH]

I've done something to my code or to my environment that caused an image to stop working.
I've searched online and read several articles and tried the usual suggestions for verifying names, paths, etc. and clearing cache.
I've done all of that but cannot find my problem. I think I have a mental set that is blocking me seeing something that is probably obvious to others.
Instead of bumbling around in my main code, I created a new html file stripped down to a heading and an image tag complete with src width height and alternate text.
When my browser reads the index file it displays the heading and an area of the size coded with a border and an icon in the upper left of that area.
The image file is a .png file in the same folder as the index file. I also tried making an image folder and using 'image/' preceding the file name; neither worked.

Here's the code straight from Sublime Text: (apologies for not following the guidelines of using bbcode but I don't know how to do that).
<DOCTYPE! html>

<head>
<title>testing</title>
</head>

<body>
<p>I can see this</p>
<img src="The_Clan_in_Color_cropped.png" alt="image missing" width="600" height="400">
</body>

Please rub my nose in what I can't see and tell me how to use the bbcode protocol. I'm thinking it's a syntax issue but I can't find it.

Thank you.
rhh

 

[Antero360]

I've done something to my code or to my environment that caused an image to stop working.
I've searched online and read several articles and tried the usual suggestions for verifying names, paths, etc. and clearing cache.
I've done all of that but cannot find my problem. I think I have a mental set that is blocking me seeing something that is probably obvious to others.
Instead of bumbling around in my main code, I created a new html file stripped down to a heading and an image tag complete with src width height and alternate text.
When my browser reads the index file it displays the heading and an area of the size coded with a border and an icon in the upper left of that area.
The image file is a .png file in the same folder as the index file. I also tried making an image folder and using 'image/' preceding the file name; neither worked.

Here's the code straight from Sublime Text: (apologies for not following the guidelines of using bbcode but I don't know how to do that).
<DOCTYPE! html>

<head>
<title>testing</title>
</head>

<body>
<p>I can see this</p>
<img src="The_Clan_in_Color_cropped.png" alt="image missing" width="600" height="400">
</body>

Please rub my nose in what I can't see and tell me how to use the bbcode protocol. I'm thinking it's a syntax issue but I can't find it.

Thank you.
rhh

you're just missing a slash at the end, just before that closing >

An img tag should look something like this:

<img src="" alt="" />

 

[RHH]

Hello, Antero360. Thanks for the reply.

I made the change in my test area and got the following results. I still have the same problem. In the Code Forum 1 screenshot you can see the result of View Page Source and in the Code Forum 2 screenshot you can see what my browser displays.

Am I wrong in expecting Firefox to display my HTML when reading my HDD files?

Thanks again.

rhh

 

[Malcolm]

Hey @RHH

Could you share your updated code?

 

[RHH]

<DOCTYPE! html>

<head>
<title>testing</title>
</head>

<body>
<p>I can see this</p>
<img src="the-clan-in-color-cropped.png" alt="image missing" width="600" height="400" />
</body>

_

 

[Malcolm]

Hmm, you're missing <html> and </html> tags. In addition, the exclamation point (!) to the right of DOCTYPE should be on the other side, e.g. <!DOCTYPE html>

Try updating your code to this:

<!DOCTYPE html>
<html>
    <head>
        <title>testing</title>
    </head>
    <body>
        <p>I can see this</p>
        <img src="the-clan-in-color-cropped.png" alt="image missing" width="600" height="400" />
    </body>
</html>

• Move (!) to the left side of DOCTYPE, should be <!DOCTYPE html>.
• head, body should be within <html></html> tags.
• Note: <!DOCTYPE html> should always be at the top outside of <html></html> tags.

 

[RHH]

-
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>

<body>
<p>I can see this</p>
<img src="the-clan-in-color-cropped.png" alt="image missing" width="600" height="400" />
</body>

</html>

I made those changes including the !DOCTYPE declaration and I still can't see the image. The image file name is correct and the file is in the same folder as the index file. The result has changed. I no longer see the 600x400 frame and the missing image icon no longer appears.

 

[Malcolm]

I made those changes including the !DOCTYPE declaration and I still can't see the image. The image file name is correct and the file is in the same folder as the index file. The result has changed. I no longer see the 600x400 frame and the missing image icon no longer appears.

Where are you hosting the image the-clan-in-color-cropped.png?

 

[RHH]

It is in the same folder as the index.html file on my HDD.

See the screenshot attached.

 

[Malcolm]

Maybe try /image the-clan-in-color-cropped.png for img src

 

[RHH]

I see that you dropped the double quotes. I tried with the statement as you show it without the double quotes but with /image and with the double quotes and with /image. I even tried putting a slash before the file name. To be certain that I was saving the file correctly in Sublime and that Iy browser was seeing the edited html index file, I added a word to the heading. The only change I saw was that added word in the heading.

 

[RHH]

Hello again.

I was able to find and fix my problem. It occurred to me that there might be an HTML validation tool that I could use to find errors. I found one. It discovered an invalid statement in my <img> tag. I fixed that and was able to host my script and it works properly.

 

[Malcolm]

Hello again.

I was able to find and fix my problem. It occurred to me that there might be an HTML validation tool that I could use to find errors. I found one. It discovered an invalid statement in my <img> tag. I fixed that and was able to host my script and it works properly.

Awesome! Great find 🙂