求助：在NextJS中使用react-photo-view无法显示图片

开发者阿泽

2026-4-13

我现在遇到个麻烦，用react-photo-view库没法正常显示照片。我写的代码如下，但就是不生效——要是把PhotoProvider和照片查看器的代码去掉，图片就能正常显示了。是不是这个库和NextJS不兼容啊？

（原代码片段有部分截断，核心是使用了PhotoProvider和PhotoView组件包裹图片）

别担心，我来帮你梳理排查方向~其实react-photo-view和NextJS是可以兼容的，大概率是使用细节上没处理好，给你几个常见的解决思路：

样式加载异常：NextJS的样式引入逻辑和普通React项目有区别，要是你没正确引入react-photo-view的样式，可能会导致查看器组件被隐藏，看起来像是图片没显示。你可以试试在全局样式文件（比如app/globals.css）里添加@import 'react-photo-view/dist/react-photo-view.css';，或者在使用组件的文件头部直接import 'react-photo-view/dist/react-photo-view.css';，确保样式能正常加载。

图片路径与组件适配：NextJS推荐用next/image组件来处理静态图片，它和原生img的路径处理逻辑不同。如果你用了next/image，要注意在PhotoView的src属性里写正确的图片路径，示例代码如下：

import Image from 'next/image';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

export default function PhotoComponent() {
  return (
    <PhotoProvider>
      <PhotoView src="/assets/my-photo.jpg">
        <Image
          src="/assets/my-photo.jpg"
          alt="我的照片"
          width={400}
          height={300}
        />
      </PhotoView>
    </PhotoProvider>
  );
}

SSR冲突问题：react-photo-view的部分逻辑可能在服务端渲染时出现异常，你可以尝试用NextJS的dynamic导入方式禁用SSR，示例：

import dynamic from 'next/dynamic';

// 动态导入组件并禁用SSR
const PhotoView = dynamic(
  () => import('react-photo-view').then(mod => mod.PhotoView),
  { ssr: false, loading: () => <div>加载中...</div> }
);
const PhotoProvider = dynamic(
  () => import('react-photo-view').then(mod => mod.PhotoProvider),
  { ssr: false }
);

版本兼容性：检查下你使用的react-photo-view和NextJS版本是否匹配，有时候新版本库对NextJS的新特性适配还不完善，试试升级到两者的最新稳定版，或者降级到已知兼容的版本。

你可以先从样式加载和图片路径这两个最常见的问题入手排查，应该能解决~

备注：内容来源于stack exchange，提问作者Wee Li