Vue component that display loader during image loading

Loading images in web applications is a common task, and providing users with visual feedback during the image loading process enhances the overall user experience. In this comprehensive guide, we’ll explore the creation of a Vue component that gracefully handles image loading, ensuring a seamless and visually appealing transition for users.

The Importance of Visual Feedback:

Loading large images or a multitude of images asynchronously can introduce latency, leading to a delay in rendering. Displaying a loader while images are loading not only informs users that content is on its way but also creates a polished and professional user interface.

Setting Up the Vue Project:

Start by creating a new Vue project using the Vue CLI. If you haven’t installed it, run:

npm install -g @vue/cli

Now, create a new project:

vue create vue-image-loader
cd vue-image-loader

Designing the ImageLoader Component:

1. Create the ImageLoader.vue component:

<template>
  <div class="image-loader">
    <div v-if="loading" class="loader"></div>
    <img v-else :src="src" alt="Loaded Image" @load="onImageLoad" />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: true,
    };
  },
  methods: {
    onImageLoad() {
      this.loading = false;
    },
  },
};
</script>

<style scoped>
.image-loader {
  position: relative;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>

2. Using the ImageLoader component in App.vue:

<template>
  <div id="app">
    <ImageLoader src="https://example.com/your-image.jpg" />
  </div>
</template>

<script>
import ImageLoader from './components/ImageLoader.vue';

export default {
  components: {
    ImageLoader,
  },
};
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

Explanation of the ImageLoader Component:

1. The template section contains a container that conditionally renders a loader or the image based on the loading state.
2. The script section defines a prop for the image source (src) and a loading data property. The onImageLoad method sets loading to false when the image has finished loading.
3. The scoped styles create a simple spinner/loader using CSS. The loader is positioned at the center of the image container.

Running the Application:

Run the following commands to see the image loader in action:

npm install
npm run serve

Visit http://localhost:8080 in your browser to view the image loader component with the provided sample image source.

Complete implementation of Vue component that display loader during image loading

Vue-load-image

Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alternate content when the image fails to load.

Installation

Via NPM:

# for Vue 2.x
npm i vue-load-image 

# for Vue 3.x
npm i vue-load-image@next

Via CDN:

<!-- for Vue 2.x -->
<script src='https://unpkg.com/vue-load-image'></script>

<!-- for Vue 3.x -->
<script src='https://unpkg.com/vue-load-image@next'></script>

Usage

Image

Vue 2.x

<template>
  <div>
    <vue-load-image>
      <img slot="image" src="./image.png"/>
      <img slot="preloader" src="./image-loader.gif"/>
      <div slot="error">error message</div>
    </vue-load-image>
  </div>
</template>

<script>
import VueLoadImage from 'vue-load-image'

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

Vue 3.x

<template>
  <div>
    <vue-load-image>
      <template v-slot:image>
        <img src="./image.png"/>
      </template>
      <template v-slot:preloader> 
        <img src="./image-loader.gif" />
      </template>
      <template v-slot:error>Image load fails</template>
    </vue-load-image>
  </div>
</template>

<script>
import VueLoadImage from 'vue-load-image'

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

Background-image

Vue 2.x

<template>

  <div>

    <vue-load-image>

      <div slot="image" style="background-image: url(./image.png)" data-src='./image.png' />

      <img slot="preloader" src="./image-loader.gif" />

      <div slot="error">error message</div>

    </vue-load-image>

  </div>

</template>
<script>

import VueLoadImage from 'vue-load-image'
export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

</script>

Vue 3.x

<template>

  <div>

    <vue-load-image>

      <template v-slot:image>

        <div style="background-image: url(./image.png)" data-src='./image.png' />

      </template>

      <template v-slot:preloader> 

        <img src="./image-loader.gif" />

      </template>

      <template v-slot:error>Image load fails</template>

    </vue-load-image>

  </div>

</template>
<script>

import VueLoadImage from 'vue-load-image'
export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

</script>