img标签图片加载不出来时,使用onerror属性
HTML写法:
<img src="../abc/1.png" onerror="this.src=defaultImg">
vue写法
<template>
<div>
<div>
<img :src="imgUrl" @error="setDefaultImg" />
<button @click="dianji" class="anniu">按钮</button>
</div>
</div>
</template>
<script>
import defaultImg from "../pages/first.png";
export default {
name: "Count",
data() {
return {
imgUrl:
"https://img1.baidu.com/it/u=2971221284,3933528905&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668790800&t=5a34ff095a34649798014dc47844c283"
};
console.log(e);
},
methods: {
setDefaultImg(e) {
e.target.src = defaultImg;
},
dianji(e) {
console.log(e.target.class);
}
}
};
</script>
<style>
</style>