如何覆盖标准后备图像

当服务器找不到请求的图像时，它会发送404，并用这样的标准回映像代替它：

<img src="fallback.jpg"/>

我想知道您是否有可能将另一张图像替换为后备图像。

您的意思是像后备图像吗？如果是这样，请考虑使用此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>

通过页面上的所有图像迭代的简单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";
    });
}

相关内容

最新更新

热门标签：