如何在Chrome中显示图片的替代文本

70

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

如何显示图片的替代文字？

html google-chrome

— Achaius
source

您使用的是哪个版本的chrome？因为根据code.google.com/p/chromium/issues/detail?id=16734，此问题应该已经得到解决。

— Mahesh Velaga 2011年

在Chrome 29（2年以上）中，这似乎仍然是一个问题！除非元素的宽度足够宽以在一行上完整显示替代文本，否则替代文本不会显示！

— MrWhite 2013年

...元素需要具有一定的高度。在我的测试中至少为44px。

— MrWhite 2013年

14

您不应该使用alt标签来表示“找不到图像”，因为屏幕阅读器将其用于盲人和弱视人群。请参阅此以获取提示。

— 雨果

在Firefox 45.8.0中我也遇到了同样的问题-title =“在这里悬停文字”很好地解决了这个问题。

— 玫瑰

87

如果我是正确的话，这是webkit中的错误（根据this）。我不确定您是否可以做很多，对不起您的回答。

但是，有一项您可以使用的工作。如果您将title属性添加到图像（例如title="Image Not Found"），它将起作用。

— 囚犯
source

@Prisoner，<img src =“ pic.png” />，而不是<img href =“” />。宽度和高度没有区别。另外，src不应为空或被省略，实际上，它绝对不能为空（这是您的示例起作用的唯一原因）。

— Luka Ramishvili 2014年

图像的高度和宽度应该没有区别。（但是有些浏览器很奇怪。）比上面的注释更好的例子： jsfiddle.net/o8syw0bp

— Lance E Sloan先生

24

您可以使用该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" />

— 拉胡尔
source

4

是的，这是webkit中的一个问题，并且也以铬报告：http : //code.google.com/p/chromium/issues/detail? id=773 自2008年以来一直存在...并且仍未解决！

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

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

如果您只想要一些图像：

addShowAlt("#myImgID");

— 亚历克西斯
source

我不知道为什么我仍然有在Chrome这个问题，你会认为这将是解决一个重大的事情，但你的代码工作（曾经包裹在domready中块所以感谢。

— Kzqai

能否请您提供解决方案？

— Simple-Solution

该错误似乎在2016年仍然存在！可以将您的JavaScript解决方案“转换”为Chrome扩展程序或功能来立即激活吗？

— Jumpjack '16

4

使用标题属性代替alt

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

— 苏赫杰万
source

请解释一下为什么使用title属性而不是alt

— sandeep

2

我们必须同时使用title和alt来实现浏览器兼容性，因为在这种情况下，不同的浏览器会考虑不同的属性title / alt

— Harsh Baid

@Harsh是的，您的权利。实际上我在Google chrome上进行了测试，因此我根据那发布了代码。但是我们必须同时使用这两种浏览器。

— Sukhjeevan 2011年

我也浏览了一篇文章，我认为最好了解alt和title属性之间的区别。ALT和标题属性之间的差异

— Sukhjeevan 2011年

4

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

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

~~我也将其实现为名为alt的Chrome扩展程序。因为使用jQuery.live，所以它也适用于动态加载的内容。~~ 我已停用此扩展程序，并将其从Chrome商店中删除。

— 贾斯汀力
source

1

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

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

就像Alexis的贡献一样，它具有删除丢失的img图像的好处。

— Cuse70
source

1

将鼠标悬停在图像上时，Internet Explorer 7（及更早版本）将alt属性的值显示为工具提示。根据HTML规范，这不是正确的行为。应该使用title属性。资料来源：http : //www.w3schools.com/tags/att_img_alt.asp

— 重氮
source

1

要显示缺失图像的替代文本，我们必须添加这样的样式。我认为，无需为此添加额外的JavaScript。

.Your_Image_Class_Name {
  font-size: 14px;
}

对我来说有用。请享用！！！！

— 哈努曼·萨哈（Hanuman Sahay）
source

0

您可以将title属性放在tag.I希望它可以工作。

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

— 纳格斯·蒙加德
source

-2

我用这个，它与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>

本质上，代码正在执行的工作是检查File。该$data变量将与我们的数组一起使用，然后实际进行所需的更改。如果找不到，它将抛出异常。

— 用户名
source