uni-app image加载错误 404 替换为默认图片

zyue_1217

已于 2023-07-19 14:34:09 修改

阅读量2.4k

点赞数

分类专栏：微信小程序 uni-app 文章标签： uni-app 前端 javascript

于 2023-07-19 14:03:15 首次发布

本文链接：https://blog.youkuaiyun.com/zyue_1217/article/details/131807033

版权

微信小程序同时被 2 个专栏收录

6 篇文章

订阅专栏

uni-app

2 篇文章

订阅专栏

文章介绍了在Vue.js应用中，如何使用双层v-for遍历数据，并在图片加载错误时，通过handleImageError方法切换至默认图片。通过item或index下标来修改数据，确保列表中的图片正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

双层v-for

使用item修改

aitem.cat_icon || defaultPic绑定图片src属性为aitem.cat_icon

如果aitem.cat_icon的值为空字符串或undefined，那么默认图片defaultPic被显示出来
当图片加载错误时,触发handleImageError方法,将aitem传进去

 <!-- 页面-->
 <view v-for="item in cateListChild" :key="item.cat_id" class="item-right">
   <view class="item-right-title">/{{ item.cat_name }}/</view>
   <view class="item-right-bottom">
    <view class="right-list" v-for="aitem in item.children" :key="aitem.cat_id" @click="gotoGoodsList(aitem)">
      <image :src="aitem.cat_icon || defaultPic" @error="handleImageError(aitem)"></image>
   </view>
  </view>
</view>

修改该条数据的cat_icon值
打印aitem如下,修改cat_icon即可

//js
 data(){
 defaultPic:'../../static/goods-image/defaultPic.png'
},
methods:{
 // 处理图片显示错误,显示默认图片
handleImageError(aitem) {
   aitem.cat_icon = this.defaultPic;
    },
}

使用index下标修改

当图片加载错误时,触发handleImageError方法,将两个下标传进去

 <!-- 页面-->
 <view v-for="(item, index) in cateListChild" :key="item.cat_id" class="item-right">
   <view class="item-right-title">/{{ item.cat_name }}/</view>
   <view class="item-right-bottom">
    <view class="right-list" v-for="(aitem, aindex) in item.children" :key="aitem.cat_id" @click="gotoGoodsList(aitem)">
      <image :src="aitem.cat_icon || defaultPic" @error="handleImageError($event, index, aindex)"></image>
   </view>
  </view>
</view>

使用下标修改该条数据的cat_icon值

//js
 data(){
 defaultPic:'../../static/goods-image/defaultPic.png'
},
methods:{
 // 处理图片显示错误,显示默认图片
handleImageError(e, index, aindex) {
  const changeDefaultImg = this.cateListChild[index].children[aindex];
  changeDefaultImg.cat_icon = this.defaultPic;
    },
}