vue图片img加载失败显示自定义默认图片(缺省图)

web前端妹妹

已于 2023-03-23 11:52:39 修改

阅读量2.8k

点赞数 1

分类专栏： javascript vue.js vue 文章标签： javascript vue.js 开发语言

于 2022-10-09 11:25:22 首次发布

本文链接：https://blog.csdn.net/qq_39695210/article/details/127222661

版权

vue 同时被 3 个专栏收录

24 篇文章 2 订阅

订阅专栏

javascript

22 篇文章 0 订阅

订阅专栏

vue.js

18 篇文章 0 订阅

订阅专栏

vue图片img加载失败显示自定义默认图片(缺省图)

1.图片加载示例

2.加载失败显示默认图片

3.加载失败默认图片代码处理

           <div class="book-img">
              <img v-if="item.coverImg" :src="item.coverImg" @error="errorImg($event)" />
            </div>

   /**图片加载失败显示自定义默认图片(缺省图)*/
    errorImg (e) {
      // console.log(e.target.src,"法1")
      // console.log(e.srcElement.src,"法2")
      e.srcElement.src=require('../../src/assets/no-img.png');
      //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
      e.srcElement.onerror=null; //防止闪图
    },

如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，你的鼓励将是我创作的最大动力!

qq群933053581