HTML-Img alt属性隐藏图像

Question

我通常会请求图标"；example.com/favicon.ico"；。

如果网站没有收藏夹，我想使用；alt"；以隐藏图像，使其不出现并且不具有"隐藏"属性；缺少图像"；偶像

例如

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

这能做到吗？

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

Answer 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" />