是否有任何方法在HTML <img>标记中呈现默认图像,以防src属性无效(仅使用HTML)?如果不是,你会用什么轻量级的方式来解决这个问题?
当前回答
这是一个简单的Jquery,为我工作
$(image).on('error', function(event) {
imgage.attr('src', 'your_image.png');})
其他回答
在Spring in Action第三版中找到了这个解决方案。
<img src=“../资源/images/Image1.jpg”
更新: 这不是一个只有HTML的解决方案…Onerror是javascript
<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
请务必输入图像的尺寸,以及是否希望图像平铺。
谷歌抛出了这个页面的“图像回退html”关键字,但因为上面没有帮助我,我正在寻找一个“svg回退支持IE低于9”,我继续搜索,这是我发现的:
<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->
这可能离题了,但它解决了我自己的问题,也可能帮助到其他人。
上面的解决方案是不完整的,它错过了属性src。
这一点。src和this.attribute('src')是不一样的,第一个包含了对图像的完整引用,例如http://my.host/error.jpg,但属性只是保持原始值error.jpg
正确的解决方案
<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
好了! ! 我发现这种方法很方便,检查图像的高度属性为0,然后你可以用默认的图像覆盖src属性: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
image.setAttribute('src','../icons/<some_image>.png');
//check the height attribute.. if image is available then by default it will
//be 100 else 0
if(image.height == 0){
image.setAttribute('src','../icons/default.png');
}
推荐文章
- 如何在JavaScript中转义单引号(')?
- 如何使用HTML/CSS在文本中插入空格/制表符
- 用背景图像填充SVG路径元素
- 将JSON显示为HTML
- HTML被认为是一种编程语言吗?
- 如何修复favicon.ico错误:“Failed to load resource: net::ERR_EMPTY_RESPONSE”
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 使用ImageMagick“Diff”图像
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 样式化HTML电子邮件的最佳实践