微信小程序 image 组件 binderror 事件处理与 setData 动态属性名技巧

作者:小圆点时间:2026-10-21 22:04:08浏览:383

本文介绍微信小程序中 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 的键名不能直接通过字符串拼接动态生成路径。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

作者最新文章