Html 如何在 chrome 中显示图像的替代文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5386570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display alt text for an image in chrome
提问by Achaius
The image with invalid source displays an alternate text in Firefox but not in chrome unless the width of an image is adjusted.
来源无效的图像在 Firefox 中显示替代文本，但在 chrome 中不显示，除非调整图像的宽度。
<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?
如何显示图像的替代文字？
回答by Prisoner
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.
如果我是对的，这是 webkit 中的一个错误（根据this）。我不确定您是否可以做很多事情，对于弱小的答案感到抱歉。
There is, however, a work around which you can use. If you add the titleattribute to your image (e.g. title="Image Not Found") it'll work.
但是，您可以使用一种解决方法。如果您将title属性添加到您的图像（例如title="Image Not Found"），它将起作用。
回答by rahul
You can use the titleattribute.
您可以使用该title属性。
<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" />
回答by Sukhjeevan
Use title attribute instead of alt
使用 title 属性代替 alt
<img
height="90"
width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
title="Image Not Found"
/>
回答by Alexis
Yes it's an issue in webkit and also reported in chromium: http://code.google.com/p/chromium/issues/detail?id=773It's there since 2008... and still not fixed!!
是的，这是 webkit 中的一个问题，也在 Chromium 中报告：http: //code.google.com/p/chromium/issues/detail?id=773 自 2008 年以来一直存在......但仍未修复！
I'm using a piece of javacsript and jQuery to make my way around this.
我正在使用一段 javacsript 和 jQuery 来解决这个问题。
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");
回答by Justin Force
Here is a simple workaround in jQuery. You can implement it as a user script to apply it to every page you view.
这是 jQuery 中的一个简单解决方法。您可以将其实现为用户脚本，以将其应用于您查看的每个页面。
$(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 I have retired this extension and removed it from the Chrome store.jQuery.live, it works with dynamically loaded content, too.
我还将其实现为名为alt的 Chrome 扩展程序。因为它使用我已停用此扩展程序并将其从 Chrome 商店中删除。jQuery.live，所以它也适用于动态加载的内容。
回答by Hanuman Sahay
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.
要显示缺失图像的 Alt 文本，我们必须添加这样的样式。我认为，没有必要为此添加额外的 javascript。
.Your_Image_Class_Name {
font-size: 14px;
}
It's work for me. Enjoy!!!!
这对我有用。享受！！！！
回答by Cuse70
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:
各种浏览器（错误）以各种方式处理这个问题。使用标题（旧的 IE '标准'）不是特别合适，因为标题属性是鼠标悬停效果。上面的 jQuery 解决方案 (Alexis) 似乎走在正确的轨道上，但我认为“错误”不会发生在可以被捕获的地方。我通过在 src 用自身替换，然后捕获错误而取得了成功：
$('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.
这与 Alexis 的贡献一样，具有删除丢失的 img 图像的好处。
回答by diazdeteran
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
当鼠标悬停在图像上时，Internet Explorer 7（及更早版本）将 alt 属性的值显示为工具提示。根据 HTML 规范，这不是正确的行为。应改用 title 属性。来源：http: //www.w3schools.com/tags/att_img_alt.asp
回答by Nagnath Mungade
You can put title attribute to tag.I hope it will work.
您可以将标题属性添加到标签。我希望它会起作用。
<img src="smiley.gif" title="Smiley face" width="42" height="42">
回答by user2242362
I use this, it works with php...
我用这个，它适用于 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 $datavariable will be used with our array then actually make the desired change. If it isn't found, it will throw an Exception.
基本上代码在做什么，是检查File。该$data变量将与我们的数组一起使用，然后实际进行所需的更改。如果没有找到，它会抛出一个异常。
