QImage component
Dead simple img component with included lazy loading.
Requirements
| Type | Path / Version | Purpose | Optional |
|---|---|---|---|
| Styles | ../../assets/main.css | CSS Variables | No |
| Directives | ../../directives/vLazy | Lazy load the image | No |
Usage
QImage can be used instead of any common image. It lazy loads the image by default using the browser's IntersectionObserver. It will be loaded once part of the image comes into view.
This behavior can be overwritten inside the directive
Basic usage
Place an image source into the src binding.
WARNING
Make sure to have the vLazy directive imported and globally enabled
Example
<template>
<q-image src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80" />
</template>
Full component's code
QImage
<template>
<img v-lazy class="q-image" :data-url="src" :alt="alt" />
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
},
alt: {
type: String,
},
},
};
</script>
<style scoped>
.q-image {
min-height: var(--el-size-lg);
height: 100%;
min-width: 100%;
width: auto;
animation: blink var(--duration-slow) infinite cubic-bezier(0, 0, 0.2, 1);
}
@keyframes blink {
0% {
background: var(--background-color-tartiary);
}
50% {
background: var(--background-color-secondary);
}
100% {
background: var(--background-color-tartiary);
}
}
</style>