@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)