How to make a preloader for an image? - vue.js

Question

I have a picture
<img class="block" :src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png" />
But how to show some other picture while the main one has not loaded?

Answer 1

<template> <div>
<img class="loading" v-if="pending" alt="image" /> <!-- This is a beautiful animation -->
<img src="your-image.png" v-if="pending" alt="image" /> <!-- If you want to put another optional picture you will do so -->
<img v-else :src="img" class="block" alt="image" /> </div>
</template>
<script>
export default {
data() {
return {
pending: false,
img: ''
};
},
created() {
this.pending = false
// your get request
fetch("https://example-api.com/image")
.then((data) => (this.img = data.img))
.finally(() => {
this.pending = false;
});
},
};
</script>
<style lang="scss">
.loading {
position: relative;
user-select: none;
cursor: wait;
transition: all 0.2s;
border-radius: 4px !important;
border: none;
background: transparent;
overflow: hidden;
color: transparent !important;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #e8ecf1 !important;
cursor: wait;
-webkit-mask-image: radial-gradient(white, black);
transition: all 0.2s;
}
&:after {
animation: loading 1.5s infinite;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(-100%);
z-index: 1;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0)
);
}
svg {
opacity: 0;
}
}
</style>