vue渐隐渐现的插件_Vue渐进式图像加载器插件，例如Medium

vue渐隐渐现的插件

Vue图像加载器 (vue-image-loader)

Vue progressive image loading plugin.

Vue渐进式图像加载插件。

View Documentation 查看文件

安装 (Installation)

$ npm install @kevindesousa/vue-image-loader

用法 (Usage)

import Vue from 'vue'
import VueImageLoader from '@kevindesousa/vue-image-loader'

Vue.use(VueImageLoader)

渐进式装载机图像 (Progressive loader image)

Instead of using the normal img tag to load images

而不是使用常规的img标签加载图像

<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304" />

use the image-loader component already globally available after the plugin installation

使用插件安装后已经全局可用的image-loader组件

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  width="864px"
  height="476px" />

占位符 (Placeholders)

To be able to immediately show some feedback to the user, it is possible to pass a placeholder image, which could be also 1% the size of the main image: it will be blurred so you can go crazy with optimizations here.

为了能够立即向用户显示一些反馈，可以传递一个占位符图像，该图像也可以是主图像大小的1％：它将变得模糊，因此您可以在此处进行优化。

in this example I actually use the same image, but you have the idea here

在此示例中，我实际上使用了相同的图像，但是您在这里有了主意

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  placeholder="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100"
  width="864px"
  height="476px"
/>

翻译自: https://vuejsexamples.com/vue-progressive-image-loader-plugin-like-medium/

vue渐隐渐现的插件