• Welcome to Simple Machines Community Forum. Please login or sign up.

Image tags get hidden if link is broken, how do you restore default behavior?

Started by NightWolve, July 15, 2021, 08:04:18 PM

Previous topic - Next topic


Normally an image tag will display a 'missing' icon to indicate a HTTP request was made at that spot, but failed to receive the data (old/outdated/broken image links). Seems however that SMF hides broken images by default instead, at least that's what I'm experiencing!

So currently what the forum does is somehow set width & height to 0, I think via JavaScript (not CSS), but I cannot find out where this is happening after hours of searching... Hiding the image tag with broken/outdated links prevents signalling to the viewer that there is a problem, you have threads just meant to share images, but instead you just see empty posts... this is the problem.

Anybody know where this is happening, how to stop it ?? Thanks!

I want this missing icon restored, , the default HTML behavior of image tags with broken links.


Smf dies not do this by default... 

Either that is BROWSER behavior,  or you have changed something
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."


Life doesn't have to be perfect to be wonderful ...


Quote from: GL700Wing on July 15, 2021, 09:13:14 PM
@NightWolve - detailed discussion/explanation from 2018 here: Want placeholder image for broken img links

Thanks, I think I tentatively solved it short term until I can find where there's a loop of all images that sets the onerror() event to a function that sets width/height=0 for failure (Pretty sure that's what's happening somewhere).

function ShowMissingImages() {
for (i = 0; i < document.images.length; i++)
if ( document.images[i].width == 0 && document.images[i].complete ) {
document.images[i].width = "24";
document.images[i].height = "24";
document.images[i].alt = document.images[i].title = document.images[i].src;

This function seemed to be a sufficient solution, added to the onload event. A setTimeout() delay would be preferable too to give the browser time to resolve all links (bad or not). Anyway, it gave consistent results on the latest Chrome, FireFox on Windows 7. IE will always show missing icons as it ignores width=0/height=0 attempts to hide the image object, you'd need display:none or visibility:hidden.

Here are the Chrome results (the title attribute is honored, so you get mouseover tooltip text of the bad link too):

If I tried "auto" or "" for width/height to overwrite the "0", it only worked on Chrome. FireFox/IE were consistent only with a size specified, and 24px was about right for the missing icon indicator.

Well, I'll keep looking, but this is a bit easier at least for now.


Oh its Photobucket, they've declared a war to forums few years ago https://www.simplemachines.org/community/index.php?topic=560406.msg3979354#msg3979354
Use imgur or something else. Photobucket is not forum friendly and they will not let their images to be visible on your forum.