Vue实现图片loading

在网络慢的情况下请求图片用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>

load

使用：

<div class="box-img">
   <imgComp :src="url"/>
</div>

data() {
  return {
   url: 'https://pic.wujinpp.com/upload/vod/20220327-1/3a5b7a7c322c3df70f8c22deede12280.jpg',
        }
    }