VUE：img标签加载图片失败时，显示一张自定义默认图片

简介

在使用<img />标签时，会遇到图片加载失败（有图片资源路径，但是可能路径拼接不正确、域名失效等）的情况，此时，显示出来的效果看着就很不舒服，就想显示一张默认图片。

img加载失败时的默认情况

想要达到的加载失败时显示默认图片的效果

具体实现

这就需要了解到img标签的属性方法：onerror

HTML写法：

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

vue写法①：

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

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

vue写法②：

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

<script>
import defaultImage from '@/assets/images/default.png'
export default {
  data() {
    return {
      defaultImage,
      imgUrl: 'http://123.com/image/name.png'
    };
  }
};
</script>

注意

1.如果图片路径不一定存在，那么可以给src一个额外的值

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

2.如果只想第一次加载失败时，显示默认图片，可以使用@error.once

<img :src="contract.url || defaultImage" @error.once="e => { e.target.src = defaultImage }" />

3.vue2.x 与 vue3.x 的编写区别只在于js

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

<script>
import defaultImage from '@/assets/images/default.png'
export default {
  setup() {
    const imgUrl = 'http://123.com/image/name.png'
    return {
      defaultImage,
      imgUrl
    };
  }
};
</script>

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！