Html 如何在chrome中显示图像的alt文本

具有无效源的图像在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"/>

---

如何显示图像的alt文本？

如果我没有错，这是webkit中的一个错误（根据）。我不确定你能做些什么，很抱歉回答得不好

---

然而，有一项工作是可以使用的。如果将

属性添加到图像中（例如

title=“image Not Found”

），它将起作用。

您可以使用

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" />

---

使用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"
/>

---

是的，这是webkit中的一个问题，也在chromium中报告： 它从2008年就在那里了。。。而且还没有修好

我正在使用一段JavaCScript和jQuery来解决这个问题

function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");

如果您只需要一个或多个图像：

addShowAlt("#myImgID");

---

下面是jQuery中的一个简单解决方法。您可以将其实现为用户脚本，以将其应用于您查看的每个页面

$(function () {
  $('img').live('mouseover', function () {
    var img = $(this); // cache query
    if (img.title) {
      return;
    }
    img.attr('title', img.attr('alt'));
  });
});

---

我还实现了一个名为Chrome的Chrome扩展。因为它使用

jQuery.live

，所以它也可以处理动态加载的内容。我已停用此扩展，并将其从Chrome应用商店中删除。

我使用此扩展，它与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>

“width=“100”height=“100”>
不同的浏览器（mis）以不同的方式处理这个问题。使用title（旧的IE“标准”）并不特别合适，因为title属性是一种鼠标悬停效果。上面的jQuery解决方案（Alexis）似乎在正确的轨道上，但我不认为“错误”发生在可以捕捉到的地方。我成功地用自身替换了src，然后捕捉到错误：

$('img').each(function()
{
    $(this).error(function()
    {
        $(this).replaceWith(this.alt);
    }).attr('src',$(this).prop('src'));
});

与Alexis的贡献一样，这有助于删除丢失的img图像。
InternetExplorer7（及更早版本）将鼠标悬停在图像上时，将alt属性的值显示为工具提示。根据HTML规范，这不是正确的行为。应改为使用title属性。来源：
您可以将title属性设置为tag。我希望它能起作用

<img src="smiley.gif" title="Smiley face" width="42" height="42">

要显示缺失图像的Alt文本，我们必须添加这样的样式。我认为，没有必要为此添加额外的javascript

.Your_Image_Class_Name {
  font-size: 14px;
}

这对我来说很有用。享受吧！！
你在使用哪个版本的chrome？因为，根据我的说法，这个问题应该已经解决了。这在chrome 29中似乎仍然是个问题（2年多过去了）！除非元素的宽度足以在一行上显示整个alt文本，否则alt文本不会显示！？…并且元素需要有一定的高度。在我的测试中至少为44px。您不应该使用alt标记说“image not found”“因为它被屏幕阅读器用于盲人和弱视者。有关提示，请参阅。我在Firefox 45.8.0中也遇到了同样的问题-和title=“hover text here”请解释为什么它使用title属性而不是ALTWE必须使用标题和alt来兼容浏览器，因为不同浏览器在这种情况下考虑不同的属性：alt@Harsh是的，你说得对。实际上我在谷歌chrome上测试过，所以我根据这个发布了代码。但是我们必须在多个浏览器上同时使用这两种浏览器。我还要看一篇文章。我认为最好理解alt和title属性之间的区别。我不知道为什么我在Chrome中仍然存在这个问题，你可能认为这是一个需要解决的主要问题，但是你的代码工作正常（一旦包装在domready块中。谢谢。你能用plunker或jfiddle提供你的解决方案吗？这个bug似乎在2016年仍然存在！你的javascript解决方案能被“扭转”吗进入Chrome扩展或boomarklet进行即时激活？@capture，不是。宽度和高度没有区别。此外，src不应该为空或省略，实际上，它从来都不是（这是您的示例工作的唯一原因）。图像高度和宽度不应该有区别。（但有些浏览器很奇怪。）一个比上面评论中更好的例子：