简介

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

img加载失败时的默认情况

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

具体实现

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

HTML写法：

<img src="/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: '/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: '/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 = '/image/name.png'return {defaultImage,imgUrl};}};</script>

最后

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