是否有任何方法在HTML <img>标记中呈现默认图像,以防src属性无效(仅使用HTML)?如果不是,你会用什么轻量级的方式来解决这个问题?
当前回答
对于任何图像,只需使用以下javascript代码:
if (ptImage.naturalWidth == 0)
ptImage.src = '../../../../icons/blank.png';
其中ptImage是由document.getElementById()获得的<img>标记地址。
其他回答
这对我来说很有效。也许你想用JQuery来挂钩事件。
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="add alternative text here">
更新了jacquargs错误保护
更新:CSS唯一的解决方案 我最近看到Vitaly Friedman演示了一个我不知道的很棒的CSS解决方案。其思想是将内容属性应用于破碎的图像。通常:after或:before不应用于图像,但当它们被破坏时,它们就会被应用。
<img src="nothere.jpg" alt="add alternative text here">
<style>
img:before {
content: ' ';
display: block;
position: absolute;
height: 50px;
width: 50px;
background-image: url(ishere.jpg);
}
</style>
演示:https://jsfiddle.net/uz2gmh2k/2/
正如提琴所示,破碎的图像本身并没有被删除,但这可能会解决大多数情况下没有任何JS或CSS的问题。如果你需要在不同的位置应用不同的图像,只需用一个类进行区分:.my-special-case img:before{…
如果你正在使用Angular/jQuery,那么这可能会有帮助……
<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">
解释
假设该项目有一个属性url可能为空,当它是,那么图像将显示为破碎。这将触发onerror属性表达式的执行,如上所述。你需要像上面描述的那样重写src属性,但是你需要jQuery来访问你的altSrc。无法让它与普通JavaScript一起工作。
可能看起来有点俗气,但挽救了我的项目。
没有办法确定无数的客户端(浏览器)将试图查看您的页面。需要考虑的一个方面是,电子邮件客户端实际上是web浏览器,可能无法处理这种诡计……
因此,你也应该包括一个alt/文本的默认宽度和高度,就像这样。这是一个纯HTML解决方案。
alt="NO IMAGE" width="800" height="350"
所以另一个好的答案可以修改如下:
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">
我在Chrome中有对象标签的问题,但我想这也适用于此。
你可以进一步样式的alt/文本非常大…
所以我的答案是使用Javascript和一个不错的alt/text回退。
我还发现这个很有趣:如何设置图像的alt属性
除了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
<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
请务必输入图像的尺寸,以及是否希望图像平铺。