vue 图片加载失败时，显示默认图片

王博wangbo

于 2020-05-28 23:25:44 发布

阅读量891

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41832017/article/details/106415803

版权

vue 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

背景： 业务开发时遇到一个需求，在图片加载失败时，显示默认占位图片，应为以前没有接触过，所以记录下解决方式。

知识点： onerror 事件会在文档或图像加载过程中发生错误时被触发。

代码：

<template>
  <div class="white-body-view">
    <img :src="logoUrl" :onerror="defalutLogoUrl" alt="">
  </div>
</template>
<script>
export default {
  data() {
    return {
      logoUrl: '',
      defalutLogoUrl: 'this.src="' + require('@/assets/images/defaultLogoUrl.png') + '"'
    }
  }
}
</script>