img 加载失败特定默认图片

本文讲解一个简单的问题，平常我们开发的时候难免用到<img />标签。当图片src地址不存在 及 加载失败的时候，想给一张加载失败的图片。直接上代码。

eg：加载失败的img默认样子 及 加载失败显示特定的图片效果

下面介绍三种主要方法：

第一种 原生 html：直接使用 img 自带属性 onerror， this指的是当前img标签

<img src="http://123.com/image/name.png" onerror="this.src = defaultImage" />

第二种 在vue中 直接直接使用 @error事件

<template>
  <div>
    <img :src="imgUrl" @error="setDefaultImage" />
  </div>
</template>

<script>
import errorImage from '@/assets/images/default.png'
export default {
  data() {
    return {
      imgUrl: 'http://123.com/image/name.png'
    };
  },
  methods: {
    setDefaultImage(e) {
      e.target.src = errorImage
    }
  }
};
</script>

// 简便写法
<template>
  <div>
    <img :src="imgUrl" @error="(e) => { e.target.src = errorImage }" />
  </div>
</template>

第三种 当你确认src 可能为空或者是错误时 给一个或的条件

<img :src="imgUrl || defaultImage" @error="e => { e.target.src = errorImage }" />

// 如果只想第一次加载失败时，显示默认图片  可以使用 vue 修饰符 .once
<img :src="contract.url || defaultImage" @error.once="(e) => { e.target.src = errorImage }" />

以上就是 图片加载失败的 显示其它默认图片的处理。看完别忘记点赞哦，小二在此谢过了！