@fengsi/vue-image

A vue component for lazy loading and zooming of images

NPM

npm install @fengsi/vue-image

Yarn

yarn add @fengsi/vue-image

Styling

Import the CSS from your node_modules directory using:

import '@fengsi/vue-image/lib/vue-image.css';

Usage

Import the component and include in your template:

import image from '@fengsi/vue-image';

...

export default {
  components: {
    'v-image': image
  }
}

...

<v-image src="/path/to/image.jpg" lazy-src="/path/to/lazy-image.jpg" zoom-src="/path/to/zoom-image.jpg" />

Props

Prop	Type	Default	Description
src	String		图片原始链接
lazySrc	String		图片懒加载链接
sizes	String		与 srcset 一起使用的 sizes, 用于 img 和 source 标签
sourceSrcset	String		source 标签的 srcset 属性
type	String	image/webp	source 标签的 type 属性
imgSrcset	String		img 标签的 srcset 属性
imgStyle	Object		img 标签的 style 属性
width	Number, String	0	img 标签的 width 属性
height	Number, String	0	img 标签的 height 属性
alt	String		img 标签的 alt 属性
		以下是放大功能选项
zoomSrc	String		可放大图片链接
moveType	String	pan	pan or drag
zoomType	String	click	click or hover
zoomScale	Number	1	放大倍数
mobileBreakpoint	Number	600	移动端节点
fullscreenOnMobile	Boolean	false	在移动端全屏放大
hideCloseButton	Boolean	false	隐藏取消按钮
afterZoomIn	Function		Function to be called after zoom in.
afterZoomOut	Function		Function to be called after zoom out.
		以下是自己项目需求选项
imgproxy	Function		图片代理
isProductImage	Boolean	false	是否为产品详情图片
lazy	Boolean	true	是否懒加载
zoom	Boolean	false	是否启用放大功能
widths	Array		响应式图片尺寸(number)