如何覆盖标准后备图像

Question

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

<img src="fallback.jpg"/>

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

Answer 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://whosebug.com/does-not-exist.png" type="image/png"> 
            <img src="https://appharbor.com/assets/images/Whosebug-logo.png" />
        </object> 
    </body> 
</html>

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

    });
}

如何覆盖标准后备图像

How to override the standard fallback image

html

image

placeholder