QImage component

Dead simple img component with included lazy loading.


TypePath / VersionPurposeOptional
Styles../../assets/main.cssCSS VariablesNo
Directives../../directives/vLazyLazy load the imageNo


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.


Make sure to have the vLazy directive imported and globally enabled


  <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" />

Full component's code


  <img v-lazy class="q-image" :data-url="src" :alt="alt" />

export default {
  props: {
    src: {
      type: String,
      required: true,
    alt: {
      type: String,

<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);