在网络慢的情况下请求图片用loading来替换空白屏
图片路径错误也也可以用另一张图来替换默认的破损图
loading素材
// 自定义封装子组件
<template>
<img :src="url">
</template>
<script>
export default {
name: 'imgComp',
props: {
src: {
type: String,
required: false,
default: () => {
return this.url;
}
},
}, // 父组件传过来所需的url
data() {
return {
url: require("@/assets/load.gif") // 先加载loading.gif
}
},
mounted() {
var newImg = new Image()
newImg.src = this.src
newImg.onerror = () => { // 图片加载错误时的替换图片
newImg.src = this.url
}
newImg.onload = () => { // 图片加载成功后把地址给原来的img
this.url = newImg.src
}
}
}
</script>
使用:
<div class="box-img">
<imgComp :src="url"/>
</div>
data() {
return {
url: 'https://pic.wujinpp.com/upload/vod/20220327-1/3a5b7a7c322c3df70f8c22deede12280.jpg',
}
}