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

变更日志：

v0.1.11（2020/12/7）

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

安装和下载：

# 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相同

事件

Slots

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

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

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