Chrome doesn't show alt attribute when image is not fetched [duplicate] - html

Question

The image with invalid source displays an alternate text in Firefox but not in chrome unless the width of an image is adjusted.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Image Not Found"/>
How to display the alt text for an image?

Answer 1

If I'm correct, this is a bug in webkit (according to this). I'm not sure if there is much you can do, sorry for the weak answer.
There is, however, a work around which you can use. If you add the title attribute to your image (e.g. title="Image Not Found") it'll work.

Answer 2

You can use the title attribute.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />

Answer 3

Yes it's an issue in webkit and also reported in chromium: http://code.google.com/p/chromium/issues/detail?id=773
It's there since 2008... and still not fixed!!
I'm using a piece of javacsript and jQuery to make my way around this.
function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");
If you only want one some images:
addShowAlt("#myImgID");

Answer 4

Use title attribute instead of alt
<img
height="90"
width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
title="Image Not Found"
/>

Answer 5

Here is a simple workaround in jQuery. You can implement it as a user script to apply it to every page you view.
$(function () {
$('img').live('mouseover', function () {
var img = $(this); // cache query
if (img.title) {
return;
}
img.attr('title', img.attr('alt'));
});
});
I have also implemented this as a Chrome extension called alt. Because it uses jQuery.live, it works with dynamically loaded content, too. I have retired this extension and removed it from the Chrome store.

Answer 6

Various browsers (mis)handle this in various ways. Using title (an old IE 'standard') isn't particularly appropriate, since the title attribute is a mouseover effect. The jQuery solution above (Alexis) seems on the right track, but I don't think the 'error' occurs at a point where it could be caught. I've had success by replacing at the src with itself, and then catching the error:
$('img').each(function()
{
$(this).error(function()
{
$(this).replaceWith(this.alt);
}).attr('src',$(this).prop('src'));
});
This, as in the Alexis contribution, has the benefit of removing the missing img image.

Answer 7

Internet Explorer 7 (and earlier) displays the value of the alt attribute as a tooltip, when mousing over the image. This is NOT the correct behavior, according to the HTML specification. The title attribute should be used instead. Source: http://www.w3schools.com/tags/att_img_alt.asp

Answer 8

To display the Alt text of missing images, we have to add a style like this. I think, there is no need to add extra javascript for this.
.Your_Image_Class_Name {
font-size: 14px;
}
It's work for me. Enjoy!!!!

Answer 9

You can put title attribute to tag.I hope it will work.
<img src="smiley.gif" title="Smiley face" width="42" height="42">

Answer 10

This can be entered in the javascript console to replace empty titles with alt text (if available) for images on a single page:
[...document.getElementsByTagName('img')].forEach((x) => {
if(x.getAttribute('alt') && !x.getAttribute('title')){
x.setAttribute('title',x.getAttribute('alt'));}})
It doesn't require JQuery.

Answer 11

I use this, it works with php...
<span><?php
if (file_exists("image/".$data['img_name'])) {
?>
<img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
<?php
}else{
echo "Image Not Found";
}>?
</span>
Essentially what the code is doing, is checking for the File. The $data variable will be used with our array then actually make the desired change. If it isn't found, it will throw an Exception.