html img加载失败,怎样替换为默认图片

本文介绍了解决网页中图片加载失败的问题,提供了使用HTML img元素的onerror属性和jQuery的error事件处理函数的方法,并讨论了避免无限循环加载的技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 img元素加载图片失败,则变成一个小图标,让页面变得难看。此时如何替换为默认图片?

onerror属性

img元素自带onerror属性,加载失败时,触发error事件
<img src="http://yongqing.is-programmer.com/posts/image.gif" onerror='this.src="http://yongqing.is-programmer.com/posts/default.gif" />

jquery.error函数

jquery提供对应的事件处理函数
$('img').error(function(){
    $(this).attr('src',"default.gif");
})

jquery.one函数

使用上面两种方法,假如默认图片也加载失败,则变成死循环. 此时可使用one()绑定事件
$("img").one("error", function(e){
     $(this).attr("src", "default.gif");
});
 
另外error事件,不支持冒泡,jquery.delegate函数捕捉不到error事件。
uni-app 的 `<img>` 标签可以设置 `src` 属性来加载图片,但在实际应用中,可能会遇到图片加载失败或网络状况不佳导致图片为空的情况。这时,我们可以利用 `uni.getImageInfo` API 获取图片信息,或者设置 `lazy-load` 和 `error` 或 `placeholder` 属性来处理这种情况。 1. 使用 `uni.getImageInfo`: 先将待加载图片 URL 存储在一个变量里,然后在请求图片前检查这个变量。如果图片存在,直接设置到 `<img>` 的 `src`;如果不存在,则可以动态添加一个默认图片 URL: ```html <template> <view> <img :src="currentImage ? currentImage.src : defaultImageUrl" /> </view> </template> <script> export default { data() { return { currentImage: {}, defaultImageUrl: 'default-image-url.jpg', // 默认图片URL }; }, onLoad() { this.currentImage = this.$http.get('your-image-url').then(response => response.data); }, onShow failure() { if (!this.currentImage) { this.currentImage = { src: this.defaultImageUrl }; } }, }; </script> ``` 2. 利用 `lazy-load` 和 `error` 或 `placeholder`: 如果你想在懒加载的方式下处理,可以使用 `lazy` 属性,同时设置一个占位图 (`placeholder`) 和错误提示样式 (`error-src`): ```html <template> <view> <img lazy src="your-image-url" placeholder="default-image-url.jpg" error-src="error-image-url.jpg" /> </view> </template> ``` 这里假设 `your-image-url`、`default-image-url.jpg` 和 `error-image-url.jpg` 分别代表实际图片默认图片和错误提示图片的 URL。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值