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属性添加到图像中，例如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

---

是的，这在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>

---

基本上，代码所做的就是检查文件。$data变量将与数组一起使用，然后实际进行所需的更改。如果找不到，它将抛出异常。

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

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

---

这与Alexis的贡献一样，有利于删除丢失的img图像。

Internet Explorer 7及更早版本在图像上滑动鼠标时，将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标签来表示图像未找到，因为它被盲人和弱视者的屏幕阅读器使用。在Firefox 45.8-和标题=悬停文本中，我也得到了同样的解决方案。请解释为什么使用title属性而不是ALTWE必须使用标题和alt来兼容浏览器，因为不同浏览器在这种情况下考虑不同的属性：alt@Harsh是的，没错。实际上我在谷歌上测试chrome所以我根据它发布代码。但我们必须在多个浏览器中同时使用这两种功能。我还浏览了一篇文章。我认为最好理解alt和title属性之间的区别。我不知道为什么我在chrome中仍然存在这个问题，你会认为这是一个需要解决的主要问题，但是您的代码在包装到domready块中后就可以工作了。所以，谢谢。你能用plunker或jfiddle提供你的解决方案吗？这个bug似乎在2016年仍然存在！你的javascript解决方案可以变成一个Chrome扩展或一个即时激活的boomarklet吗？@Capture，不是。宽度和高度没有区别。另外，src不应该是空的或省略的，实际上，它永远不会是空的，这是你的例子工作的唯一原因。图像的高度和宽度不应该有什么区别。但有些浏览器很奇怪。一个比上面评论中更好的例子：

.Your_Image_Class_Name {
  font-size: 14px;
}