HTML - Img alt 属性隐藏图像答案

【问题标题】：HTML - Img alt attribute hides imageHTML - Img alt 属性隐藏图像
【发布时间】：2021-08-05 02:15:45
【问题描述】：

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

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

例如

<img src="https://www.businessinsider.com/favicon.ico" alt="$(this).hide();" height="16" width="16">

这个可以吗？

【问题讨论】：

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

标签： javascript html jquery css image

【解决方案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" height="16" width="16">

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

$("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" height="16" width="16">

【讨论】：

在图片的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" height="50" width="50" />

【讨论】：