Show default image when wechat applet image cannot be displayed

The recently developed project is wechat applet , Dynamic display pictures , There are some problems

1. Pictures are online pictures obtained from other websites , Use image Labels cannot be displayed normally
   Solution ： Use native img label , Add attribute referrerPolicy=“no-referrer”

<img referrerPolicy="no-referrer" :src="item.picPath" >

At this point, the picture can be displayed

2. After that, I found that several pictures failed to load , Just let it display the default picture set by itself （ Wechat applet doesn't work ）
Solution ： Handle the problem of image loading failure , Use onerror Event capture image loading error , Use default picture

<img  referrerPolicy="no-referrer"  :src="item.picPath"  onerror="οnerrοr=null;src='../../static/exam/b1.png'" ></img> 

Be careful ： οnerrοr=null Must not omit , Otherwise, the effect cannot be achieved

3. use h5 test onerror It is normal that the event capture image is loaded incorrectly , But if you use wechat applet, you will report an error , I went to Baidu again

 Solution ： Wechat applet img Tags do not support onerror event , Use @error Method 

<img  referrerPolicy="no-referrer"  :src="item.picPath"  @error="imageError($event, index)" ></img>

js part :
imageError(e, index) {
	this.newFinal[index].picPath = '../../static/exam/b1.png';
 },	

Be careful ： stay imageError Method to replace a picture that cannot be displayed with a local static picture , Note that the traversal object should be modified directly , If passing value item modify item, The default picture cannot be displayed