微信小程序 image 组件 binderror 事件处理与 setData 动态属性名技巧
本文介绍微信小程序中 image 组件处理图片加载失败的方法。当图片链接 404 时,利用 binderror 事件替代 HTML 的 onerror。重点解析如何在 JS 中通过动态构建对象键名的方式,使用 setData 更新特定列表项的默认图片路径,并指出直接拼接字符串作为键名的常见错误。
微信小程序 image 组件 binderror 事件处理与 setData 动态属性名技巧
微信小程序 image 组件 binderror 使用例子(对应 HTML、JS 中的 onerror)
官方文档
| binderror | HandleEvent | 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} |
图片加载失败处理机制
在微信小程序开发过程中,若列表中包含图片且该图片链接出现 404 错误,通常需要提供一个默认的友好图片地址。在传统的 HTML 和 JavaScript 开发中,这可以通过使用 onerror 事件来实现。
<img src="image.gif" onerror="this.src='https:w.chesudi.com/Public/web/img/onerrorcar.png'" />
微信小程序的 image 组件并未提供 onerror 事件,而是提供了 binderror 事件作为替代方案。
当图片链接发生 404 错误时,会触发 binderror 事件。我们可以在绑定的事件处理函数中修改对应的数据源,具体实现如下所示。
代码实现示例
.wxml 文件
<image class="carlist_img" src="{{item.img}}" binderror="binderrorimg" data-errorimg="{{index}}"></image>
.js 文件
binderrorimg:function(e){
var errorImgIndex= e.target.dataset.errorimg //获取循环的下标
var imgObject="carlistData["+errorImgIndex+"].img" //carlistData为数据源,对象数组
var errorImg={}
errorImg[imgObject]="https://w.chesudi.com/Public/web/img/onerrorcar.png" //我们构建一个对象
this.setData(errorImg) //修改数据源对应的数据
}
常见错误与注意事项
易错点提示:类似 this.setData({"carlistData["+errorImgIndex+"].img": 对象}) 这种写法是不正确的,因为 setData 的键名不能直接通过字符串拼接动态生成路径。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
