Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how Mini Program sets default pictures and mistakenly loads pictures". In daily operation, I believe many people have doubts about how Mini Program sets default pictures and misloads pictures. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how Mini Program sets default pictures and mistakenly load pictures". Next, please follow the editor to study!

Mini Program does not support onerrorimg in H6, only the binderror attribute is open. When an error occurs, it will be posted to AppService, and the event object event.detail = {errMsg: 'something wrong'}.

The following is to deal with the situation where the image is empty and the image path is wrong according to the situation encountered. The relevant code is as follows, and the relevant data are described:

Wxml:

Description:

ImgList: list of image data sources. You need to define the initial data in data, or get the data dynamically from the API.

ErrorFunction: image loading error binding event. Replacing the error image with the default image is mainly operated here.

Data-errorimg: error image index data, which needs to be used in errorFunction to record the corresponding location of the error image.

If the image address is empty, binderror will not be triggered, so judge the image address directly. If it is empty, replace it with the default image.

Js:

Data: {

ImgList: "", / / Picture list, dynamic acquisition

DefaultImg: ".. / assets/img/defaultImg.png", / / default picture

}

.

Omit the image data source acquisition code

.

/ * *

* events triggered by image loading errors

* /

ErrorFunction: function (e) {

If (e.typewriter = "error") {

Var errorImgIndex = e.target.dataset.errorimg / / get the subscript of the error picture loop

Var imgList= this.data.imgList / / bind picture list data to variables

ImgList [errorImgIndex] = this.data.defaultImg / / replace the error picture with the default picture

This.setData ({

EvaluteUserPic: evaluteUserPic

})

}

}

Note: to use this method, the image data source needs to be placed in data, so that the data can be replaced in the event of binderror, and the data of the API can not be called directly in wxml.

At this point, on the "Mini Program how to set the default picture and error load picture" study is over, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.