Analysis of the difference between WeChat applet image component binderror usage example and onerror in js

This article mainly introduces the related information about the usage examples of WeChat mini program image component binderror and the difference between onerror in js. Friends in need can refer to

WeChat mini program image component binderror usage examples (corresponding to html , onerror in js)

binderror

HandleEvent

When an error occurs, the event name published to AppService, event object event .detail = {errMsg: 'something wrong'}

In WeChat applet development, we use a list to contain images. If the image link has a 404 error, then we should give It provides a default friendly URL address. Just use the onerror event in html and js

<img src="image.gif" onerror="this.src=&#39;https:w.chesudi.com/Public/web/img/onerrorcar.png&#39;" />

The WeChat applet image component does not provide an onerror event, but provides a binderror event instead.

If the picture link 404, this binderror event will be triggered. We just need to modify the corresponding data source in the bound event, as follows

.wxml file

<image class="carlist_img" src="{{item.img}}" binderror="binderrorimg" data-errorimg="{{index}}"></image>

.js file

 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) //修改数据源对应的数据
 }

Common mistakes: this.setData({"carlistData[ " errorImgIndex "].img": Object})Something like this is incorrect

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to PHP Chinese website!

Related recommendations:

How to use ECharts to load data asynchronously in WeChat mini-programs

How to implement image in WeChat mini-programs Method for displaying adaptive width proportions of component images

The above is the detailed content of Analysis of the difference between WeChat applet image component binderror usage example and onerror in js. For more information, please follow other related articles on the PHP Chinese website!