vue-image-loading

simple Vue Component To Display Loader untill Image Loaded Scuccessfully, And Show Error Image When Target Image Cause Error

Screenshots

Installation

npm install vue-image-loading --save

Example Usage

<template>
  <ImageLoader
    errorImageSrc="https://example.com/image_1"
    imageSrc="https://example.com/image_2"
    alt="Alternate Text"
  >
    <!-- Add Your Cusom Loader Here -->
    <Loader />

  </ImageLoader>
</template>
<script>
import ImageLoader from "vue-image-loading";
import Loader from "@/components/Loader";
export default {
  name: "App",
  components: { ImageLoader, Loader },
};
</script>

Props

| Prop Name | Description | Type | | ------------- | ------------------------------------------------------------- | ------ | | imageSrc | scr Attribute For Image To Load | string | | errorImageSrc | scr Attribute For Image To Load When Main Image Cause Error | string | | alt | alt Attribute For Image | string |

Customize Style

.image-container{  /* Root Element */  }

.image-container img{  /* Your Image Element */  }

.image-container .image-container-overlay{ /* Loader Overlay Element */   }

Report an issue if you find there's something wrong