qm-preview-image

Installation

npm install qm-preview-image

yarn add qm-preview-image

Usage

import { useState, useCallback } from 'react';
import img1 from '@/assets/images/1.jpg';
import img2 from '@/assets/images/2.jpg';
import img3 from '@/assets/images/3.jpg';
import img4 from '@/assets/images/4.jpg';
import img5 from '@/assets/images/5.jpg';
import PreviewImage from 'qm-preview-image';

const imgs = [img1, img2, img3, img4, img5];

export default function App() {
  const [visible, setVisible] = useState(false);
  const handleClose = useCallback(() => setVisible(() => false), []);
  return (
    <div>
      <button onClick={() => setVisible(true)>预览</button>

      <PreviewImage
        index={0}
        imgs={imgs}
        pageSize={9}
        open={visible}
        hasPerformance
        // 如果没有缩略图和高清图的区分，只要提供 imgs 就行了。
        // imgs 与 previewImgs 长度需要保持一致。
        // previewImgs 表示缩略图的集合，默认取 imgs。如果提供了 previewImgs，请将 hasPerformance 设置为 true。
        previewImgs={imgs}
        onClose={handleClose}
      />
    </div>
  );
}

props

param	detail	type	default
open	whether to display component	boolean	false
index	which image to preview by default	number	0
imgs	picture collection	string[]	[]
previewImgs	provide a collection of thumbnails	string[]	imgs
hasPerformance	start image performance optimization	boolean	false
onClose	close the component	function	-
pageSize	Specify how many images can be displayed on a thumbnail page	number	9

图像展示性能优化方案

图像展示性能优化方案是通过提供一个与 imgs 数组长度一样的 previewImgs 数组，previewImgs 数组中提供的是缩略图（低像素），同时，需要将 hasPerformance 设置为 true。

在展示缩略图的同时浏览器在加载高清图，等高清图像下载完成后会自动切换成高清图像。

普通模式

qm-preview-image 组件同样也提供了普通的预览模式，只需要提供 imgs 数组对象即可，在预览时展示的就是 imgs 数组中提供的图像。