background图片loading（Vue版）

最新推荐文章于 2023-04-01 14:18:55 发布

不爽的麻雀

最新推荐文章于 2023-04-01 14:18:55 发布

阅读量283

点赞数

文章标签： vue 图片加载

本文链接：https://blog.csdn.net/qq_41605091/article/details/119387048

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-component img="https://img0.baidu.com/it/u=1325422827,672151326&fm=26&fmt=auto&gp=0.jpg"></my-component>
</div>
</body>
<script crossorigin="anonymous" src="https://lib.baomitu.com/vue/3.1.4/vue.global.js"></script>


<script>
    const Counter = {
        data() {
            return {

            };
        }
    };
    const app = Vue.createApp(Counter)
    app.component('my-component', {
        template: '<div style="width: 1000px;height: 1000px;background-repeat: no-repeat;background-size: cover" :style="imgStyle"></div>',
        props: {
            img: {
                type: String,
                default: () => ""
            }
        },
        data() {
            return {
                imgStyle: {
                    backgroundImage: ''
                }
            }
        },
        mounted() {
            this.load()
        },
        methods: {
            load() {
                const img = new Image()
                img.src = this.img
                img.onload = () => {
                    setTimeout(() => {
                        this.imgStyle.backgroundImage = `url(${this.img})`
                    },5000)
                }
                img.onerror = () => {
                    this.imgStyle.backgroundImage = `url(${11111})`
                }
            }
        }
    })
    app.mount("#app");
</script>
</html>