有没有办法在HTML标记中呈现默认图像,以防src
属性无效(仅使用<img>
)?如果没有,你会用什么轻量级的方式来解决这个问题呢?
发布于 2017-03-10 19:17:43
简单的img元素不是很灵活,所以我把它和一个图片元素结合起来。这样就不需要CSS了。发生错误时,所有源集都设置为回退版本。未显示断开的链接图像。它不会加载不需要的镜像版本。图片元素支持响应式设计和浏览器不支持的类型的多个回退。
<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>
发布于 2009-06-11 12:51:23
<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
请确保输入图像的尺寸以及是否要平铺图像。
发布于 2009-06-11 13:07:02
我认为仅仅使用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中测试
https://stackoverflow.com/questions/980855
复制相似问题