<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

请务必输入图像的尺寸，以及是否希望图像平铺。

<img style=“background-image： url（image1）， url（image2）;”></img>

使用背景图像，让您可以添加多个图像。 我的情况: Image1是主图像，这将从某个地方获取(浏览器执行请求) Image2是加载image1时显示的默认本地图像。 如果image1返回任何类型的错误，用户将看不到任何更改，这对于用户体验来说是干净的

<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

请务必输入图像的尺寸，以及是否希望图像平铺。

我认为仅仅使用HTML是不可能的。然而，使用javascript，这应该是可行的。基本上我们循环每个图像，测试它是否完整，如果它的naturalWidth为零，那么这意味着它没有找到。代码如下:

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

像这样使用它:

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

在Chrome和Firefox中测试

JQuery的可模块化版本，在文件末尾添加:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

在你的img标签上:

<img src="..." data-src-error="..." />

我添加加载="lazy"到img标签。在某些情况下，它是有效的。