Vue-img图片加载失败时显示默认图片

在我们平时项目的开发过程中,经常会做展示网络图片的需求,但是由于网络等各种原因导致图片加载失败,无法展示出来,UI会给到我们一张默认图片来占位,通常我的处理方式如下:

// 图片
<img class="person-header" :src="netImg" :onerror="defaultImgae" alt="" >

// 默认图片
 data() {
    return {
      // 默认图片地址
      defaultImgae:
        'this.src="' + require("./image/default.png") + '"',
  }
}

希望能够帮到你!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,799评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,491评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,050评论 3 119
  • 感恩日记(52) 感恩美好的一天开始了,今天将是很棒的一天,今天将是顺利的一天,今天将是很快乐的一天,今天将是好事...
    苏洁虹阅读 861评论 0 0
  • 仿佛有一种小小的神秘力量,调皮地推着我一口气把杨景亦同学的《泥土日记之毛南族:阿难的故事》读完。 写下这段文字的时...
    文心访艺阅读 3,587评论 0 0