How to set pictures in the image control in the applet

The content of this article is about how to set pictures in the image control in the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

小programimageThe control sets the placeholder image:
1. Just display different images by judging that the url is empty

<image src="{{item.url?item.url:&#39;../../../images/ic_header.jpg&#39;}}"/>

2. The second case is that item.url is not empty, but there is an error in accessing the image. In this case, the error event binderror of image is needed. This method will be used when there is an error in loading the image. implement. In this method, just change the corresponding image address to a placeholder image

/**
   * 图片加载错误
   */
  onLoadImageError:function(e){
    let errorurl = '../../../images/image_placeholder.png'
    let index = e.currentTarget.dataset.index    
    if (this.data.imageType == 1) {
          this.data.complaintPics[index] = errorurl      
          this.setData({
        complaintPics:this.data.complaintPics
      })
    }

  },

Related recommendations:

Summary of issues related to image processing in WeChat mini programs

How to use the image component to display pictures in WeChat applet

The above is the detailed content of How to set pictures in the image control in the applet. For more information, please follow other related articles on the PHP Chinese website!