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

Question

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

我尝试过jquery

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

但它甚至不显示替代文本。如何通过这个显示替代文本。

Answer 1

CSS 解决方案- 可能与旧版浏览器不兼容

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

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》，其中还有更多很酷的技巧。