1.0.0 • Published 3 years ago

vue-image-loading2 v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

vue-image-loading

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

Screenshots

ezgif com-gif-maker

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 NameDescriptionType
imageSrcscr Attribute For Image To Loadstring
errorImageSrcscr Attribute For Image To Load When Main Image Cause Errorstring
altalt Attribute For Imagestring

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