Question

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

＆＃13;

<img src="fallback.jpg"/>

＆＃13;

我想知道你是否有可能用另一张图片代替后备图像。

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://stackoverflow.com/does-not-exist.png" type="image/png"> 
            <img src="https://appharbor.com/assets/images/stackoverflow-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";

    });
}

如何覆盖标准后备图像

2 个答案: