Question

如果图片不在路径中，我想只显示替代文字。它在Firefox中正常显示，但在chrome中它显示损坏的图像链接然后alt文本。我试过这样做

我试过jquery

<script type="text/javascript"> 
  function hideImage(img)
{
   img.style.display = "none";
}
</script>

但它甚至没有显示替代文字。如何通过此显示替代文字。

Answer 1

您可以挂钩error元素无法加载时引发的img事件。然后，您可以致电replaceWith()以在其位置显示alt文字。试试这个：

＆＃13;

$('img').on('error', function() {
  $(this).replaceWith(function() {
    return $(this).prop('alt');
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here's an image that won't load: <img src="doesnt_exist.jpg" alt="foo bar" />

＆＃13;

Answer 2

CSS解决方案 - 在旧浏览器中可能不兼容

使用 attr() 表达式。您可以通过将伪元素放在默认文本的顶部，将其隐藏在视图中来替换显示的默认alt文本。

img:after {  
  content: attr(alt);
  font-size: 16px;      
  color: rgb(100, 100, 100);
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

<img src="doesnt_exist.jpg" alt="No Image" />

归功于 Styling Broken Images 还有更多很酷的技巧。

仅显示图像标记html中的Alt文本

2 个答案: