HTML - Img alt 属性隐藏图像

Posted 2023-05-08

【中文标题】HTML - Img alt 属性隐藏图像

【英文标题】：HTML - Img alt attribute hides image

【发布时间】：2021-08-05 02:15:45

【问题描述】：

我通过一般地向“example.com/favicon.ico”发出图标请求，以编程方式从网站上抓取网站图标。

如果网站没有网站图标，我想使用图片的“alt”属性来隐藏图片，这样它就不会出现并且没有“缺失图片”图标。

例如

<img src="https://www.businessinsider.com/favicon.ico"   >

这个可以吗？

【问题讨论】：

是的，源已填充，但找不到文件。在我的实现中，没有办法事先检查

【参考方案1】：

您可以使用内置的error() 方法。基于此隐藏您的图像。

$("img").on("error", function() 
  $(this).hide();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico"  >

如果您在图像不可用时想要替代图像，请提供新图像源。

$("img").on("error", function() 
  $(this).attr("src", "https://homepages.cae.wisc.edu/~ece533/images/mountain.png");
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico"  >

【讨论】：

在图片的onerror标签中使用函数怎么样？

@SteveAlereza 在此处查看示例：element.onerror

【参考方案2】：

您可以立即放置占位符并检查图像是否加载到脚本中。如果加载，请替换 img src

var thisImage = new Image();
thisImage.src = 'https://www.businessinsider.com/favicon.ico';
thisImage.onload = function() 
  console.log("Image 1 ready to append");
  document.querySelector('.bg-image').src = thisImage.src;
;

<!--The source here is your placeholder-->
<img class="bg-image" src="https://placekitten.com/50/50"   />