华为云开发者联盟 uni-app Image 组件在加载图片发生错误时,显示默认图片

效果图:image 属性根据数据结构来对 @error 属性进行传参其实最终的目的是将图图片加载失败的那条数据,替换成默认图片的路径 (1). 如果你图片的加载是这种就是单层循环 :

<image v-for="(imgurl ,index_img) in attachList" :src="imgurl.attachUrl"  
             mode="aspectFill"  @error="imgerror($event, index_img )"></image>

效果图:

image 属性

根据数据结构来对 @error 属性进行传参

其实最终的目的是将图图片加载失败的那条数据,替换成默认图片的路径

(1). 如果你图片的加载是这种就是单层循环 :

 
<image v-for="(imgurl ,index_img) in attachList" :src="imgurl.attachUrl"  
             mode="aspectFill"  @error="imgerror($event, index_img)"></image>
 

在 js 的 methods 中

 
// 监听图片加载情况,失败则显示默认图片  
           imgerror:function(e,img_index){  
                var _this = this  
                if(_this.attachList.length> 0){  
                    _this.attachList[img_index].attachUrl = "../../static/imgloaderror.png"  
                }  
            },

(2). 如果你图片的加载是这种就是双层循环 :

 那么 image 组件代码:

 

 <view  v-for="(item,index) in processList">  
              <image  v-for="(imgurl ,index_img) in item.attachList"                :src="imgurl.attachUrl" mode="aspectFill"  @error="imgerror($event, index_img ,index)">                         </image>  
   </view>

在 js 的 methods 中

// 监听图片加载情况,失败则显示默认图片  
            imgerror:function(e,img_index ,index){  
                var _this = this  
                var imgChildList = _this.processList[index].attachList  
                if(imgChildList.length> 0){  
                    imgChildList[img_index].attachUrl = "../../static/imgloaderror.png"  
                }  
            },