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