在图像加载期间显示加载器– vue-load-image

在图像加载期间显示加载器– vue-load-image
插件名称 vue-load-image
版本号 v1.1.0
发布时间 2020年6月29日
插件作者 john015

vue-load-image是Vue组件,它在图像加载期间显示加载器,并在图像加载失败时显示替代内容。

安装和下载:

# NPM
$ npm install vue-load-image --save

使用:

Img

<template>
  <div>
    <vue-load-image>
      <img slot="image" src="./image.png"/>
      <img slot="preloader" src="./image-loader.gif"/>
      <div slot="error">错误信息提示</div>
    </vue-load-image>
  </div>
</template>

<script>
// es6
import VueLoadImage from 'vue-load-image'
// es5
var VueLoadImage = require('vue-load-image').default

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

Background-image

<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">错误信息提示</div>
    </vue-load-image>
  </div>
</template>

<script>
// es6
import VueLoadImage from 'vue-load-image'
// es5
var VueLoadImage = require('vue-load-image').default

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

将data-src设置为与background-image url相同

事件

名称描述
onError图像加载失败时触发onError。
onLoad加载图像时触发onLoad。

Slots

"image" 成功加载图像后,将渲染插槽

"preloader" 图片载入过程中会显示广告位

"error" 图像加载失败时,将渲染插槽。

变更日志:

v1.1.0 (06/28/2020)

  • 为 Vue 3 更新

v0.1.11(12/09/2020)

  • 应用img crossorigin属性

v0.1.11(2020/12/7)

  • 重构:更改“ VueLoadImage”文件代码以使其更具可读性