Question

包含无效来源的图片会在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"/>

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

Answer 1

如果我是正确的，这是webkit中的一个错误（根据this）。我不确定你能做多少，对不起的答案很抱歉。

但是，您可以使用一种工作方式。如果您将 title 属性添加到图片中（例如title="Image Not Found"），它就能正常运行。

Answer 2

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

Answer 3

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

Answer 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");

Answer 5

这是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商店中删除。

Answer 6

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

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

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

Answer 7

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

Answer 8

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

.Your_Image_Class_Name {
  font-size: 14px;
}

这对我有用。享受！！！！

Answer 9

您可以将title属性添加到标签。希望它可以工作。

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

Answer 10

我使用它，它适用于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变量将与我们的数组一起使用，然后实际进行所需的更改。如果找不到，则会抛出异常。

如何在chrome中显示图像的替代文字

10 个答案: