如何在Next.js中使用react-viewer图片预览

1.安装依赖
使用npm，或者pnpm进行包安装依赖包

npm i react-viewer
# or pnpm add react-viewer
1
2

2.封装依赖包组件
将依赖包引入到文件之中，然后封装成组件，以备后面业务逻辑中使用；其示例代码如下：

import { FC, memo, useMemo } from 'react';
import Viewer from 'react-viewer';
import { nonEmptyArr } from '@lib/utils';

interface imagesProps {
  src: string;
  alt: string;
}
interface ReactViewerProps {
  imgUrls: any[]; // 预览的数据
  visible: boolean; // 是否打开弹窗
  handleClose: () => void; // 弹窗回调
  getImageUrl: (str: string) => string; // 获取cnd地址函数
  key?: string; // 获取需要预览数据的key
  activeIndex?: number; // 打开弹窗当前预览图片的位置
  needCDN?: boolean; // 是否需要使用CDN地址 
}

const ReactViewer: FC<ReactViewerProps> = ({
  imgUrls,
  visible,
  handleClose,
  getImageUrl,
  key,
  activeIndex = 0,
  needCDN = true,
}) => {
  const images: imagesProps[] = useMemo(() => {
    const imgArr: any = [];
    if (nonEmptyArr(imgUrls)) {
      imgUrls.forEach((item: any) => {
        if (key) {
          imgArr.push({
            src: needCDN ? getImageUrl(item?.[key]) : item?.[key],
            alt: '',
          });
        } else {
          imgArr.push({
            src: needCDN ? getImageUrl(item) : item,
            alt: '',
          });
        }
      });
    }
    return imgArr;
  }, [imgUrls]);

  return (
    <>
      {nonEmptyArr(images) && visible && (
        <Viewer visible={visible} onClose={handleClose} images={images} activeIndex={activeIndex} />
      )}
    </>
  );
};

export default memo(ReactViewer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

3.使用示例
如何正确的使用一封装好的组件组件，其使用场景如下所示：

import dynamic from 'next/dynamic';
import { useState } from 'react';
const ReactViewer = dynamic(() => import('../ReactViewer'), { ssr: false });
const TestDemo = () = > {
  const imgUrls = ['abc.png','bcd.jpg'];
	const [showBigImage, setShowBigImage] = useState<boolean>(false);
	const getImageUrl = () => {
    // todo... 获取cdn的函数
  }
	const handleBigImg = () => {
    setShowBigImage((showBigImage) => !showBigImage)
  }
  return (
    <ReactViewer
      visible={showBigImage}
      handleClose={handleBigImg}
      imgUrls={imgUrls}
      getImageUrl={getImageUrl}
    />
  )
}
export default TestDemo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22