如何覆盖标准后备图像[重复]

Posted 2023-03-05

技术标签:

【中文标题】如何覆盖标准后备图像[重复]【英文标题】：How to override the standard fallback image [duplicate] 【发布时间】：2018-10-05 08:28:17 【问题描述】：

当服务器找不到请求的图像时，它会发送 404 并将其替换为标准的备用图像，如下所示：

&lt;img src="fallback.jpg"/&gt;

我想知道您是否可以用另一张图片替换备用图片。

【问题讨论】：

试试这个：***.com/q/980855 【参考方案1】：

你的意思是像后备图片吗？如果是这样考虑这个 html 解决方案

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 
    <head> 
        <title>Object Test</title>
     </head> 
    <body> 
        <object data="http://***.com/does-not-exist.png" type="image/png"> 
            <img src="https://appharbor.com/assets/images/***-logo.png" />
        </object> 
    </body> 
</html>

【讨论】：

你的答案很有趣，但效率不如另一个【参考方案2】：

一个简单的遍历页面上所有图片的JS解决方案如下：

// Get container of all img elements on page
var images = document.getElementsByTagName('img');

// Iterate through images
for (var i = 0; i < images.length; i++) 

    // Add event handler on image error
    images[i].addEventListener('error', function(e) 

        // Update SRC to custom fallback image
        e.target.src = "http://via.placeholder.com/150x150";

    );

【讨论】：

以上是关于如何覆盖标准后备图像[重复]的主要内容，如果未能解决你的问题，请参考以下文章

如何获取包含背景图像以覆盖整个div？ [重复]