是否有任何方法在HTML <img>标记中呈现默认图像，以防src属性无效(仅使用HTML)?如果不是，你会用什么轻量级的方式来解决这个问题?
当前回答
对于任何图像，只需使用以下javascript代码:
if (ptImage.naturalWidth == 0)
ptImage.src = '../../../../icons/blank.png';
其中ptImage是由document.getElementById()获得的<img>标记地址。
其他回答
你要求只有HTML的解决方案…
<！DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd " > < html lang =“en”> <头> <标题>对象测试< /名称> <meta http-equiv=" content - type " content="text/html;charset = utf - 8”> > < /头 <身体> < p > <object data="https://stackoverflow.com/does-not-exist.png" type="image/png"> <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow徽标和图标等"> < /对象> < / p > < /身体> < / html >
由于第一个图像不存在，将显示回退(在这个网站上使用的精灵*)。如果你用的是不支持object的旧浏览器，它会忽略那个标签，使用img标签。查看caniuse网站了解兼容性。从IE6+开始的所有浏览器都广泛支持该元素。
*除非图片的URL改变了(再次)，在这种情况下，你可能会看到alt文本。
在Spring in Action第三版中找到了这个解决方案。
<img src=“../资源/images/Image1.jpg”
更新: 这不是一个只有HTML的解决方案…Onerror是javascript
除了Patrick的精彩回答，对于那些正在寻找跨平台angular js解决方案的人来说，你可以看看:
<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
<!-- any html as a fallback -->
</object>
这是一个我试图找到正确解决方案的页面:http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview
简单的img-element不是很灵活，所以我将它与picture-element结合在一起。这样就不需要CSS了。当发生错误时，所有srcset都被设置为回退版本。断开的链接图像不显示。它不会加载不需要的图像版本。图片元素支持响应式设计，并为浏览器不支持的类型提供多种回退。
<picture>
<source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
<source id="s2" srcset="image2_broken_link.png" type="image/png">
<img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
我添加加载="lazy"到img标签。在某些情况下，它是有效的。
