Vue 3 Image Loader

Vue 3 package for showing a loader while an image loading with default using skeleton loader.

Installation

npm install vue3-loader-image

// or use yarn
yarn add vue3-loader-image

Usage

Importing

This package support either composition and options api with typescript.

<script lang="ts">
import VueLoaderImage from 'vue3-loader-image';
import 'vue3-loader-image/dist/style.css'
</script>

Or use option api.

<script lang="ts">
import { defineComponent } from 'vue'
import VueLoaderImage from 'vue3-loader-image';
import 'vue3-loader-image/dist/style.css'

export default defineComponent({
  components: {
      VueLoaderImage
  }
})
</script>

Example

By default this package uses a skeleton loader, and there are 3 props that must be filled in, they are src, width, and height

<VueLoaderImage src="https://images.unsplash.com/photo-1439066615861-d1af74d74000" width="300px" height="300px"></VueLoaderImage>

We can use delay props to increase the time the image will be displayed, because sometimes the loader doesn't come out because the internet speed is good during the loading process or image was cached.

<VueLoaderImage delay="4000" src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=1973" width="300px" height="300px"></VueLoaderImage>

That's will be show image after image loaded plus 4 second.

Beside skeleton loader you also can use custom css loader like using slot like this.

<template>
<VueLoaderImage delay="4000" src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=1973" width="300px" height="300px">
  <div class="loader"/>
</VueLoaderImage>
</template>
<style>
.loader {
    // loader css animation & style here
}
</style>

See more css loader on https://css-loaders.com.

Props

For width, height, and pill accept string as intact css measurement units, please provide the unit Measurement after the value.

Attribute	Type	Is Required	Description
src	String	true	Image source url which will be displayed
width	String	true	Width of image, accepting all unit measurentment (1px, 1rem, 1%, etc)
height	String	true	Same like width
delay	String	no	Image will be show after loaded plus delay value
circle	Boolean	no	Border radius 100%
pill	String	no	Border radius custom value
alt	String	no	--
crossorigin	String	no	--
loading	String	no	--
longdesc	String	no	--