vue-load-image

    0.2.0 • Public • Published

    English | 한국어

    Vue-load-image

    npm npm bundle size (minified) npm version NpmLicense

    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.

    Demo

    vue-load-image Demo / (Source Code)

    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>

    ⚠️Notice

    Set data-src to be the same as background-image url

    Events

    Name Description
    onError onError gets triggered when the image fails to load.
    onLoad onLoad gets triggered when the image is loaded.

    Slots

    "image" slot will be rendered when the image is successfully loaded

    "preloader" slot will be rendered when the image is in the process of loading

    "error" slot will be rendered when the image load fails.

    Install

    npm i vue-load-image

    DownloadsWeekly Downloads

    1,488

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    15.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar