开发中的 React 动态图片导入

Question

我正在构建一个需要动态显示图像的 React 应用程序，这些图像数以千计地存储在服务器端文件系统上。我成功实施这一点的所有尝试都失败了，包括许多来自对类似问题的回答。

一些细节： 我使用 create-react-app 来初始化我的应用程序。我在开发模式下运行（没有运行 npm-build）。我使用 Express.js (Node.js) 作为网络服务器，我通过代理与之交互（只有“/api”http 请求使用代理）。我试图“要求”图像的 js 代码位于“src”文件夹中。图像位于默认“公共”文件夹中的“图像”文件夹中。

我以为我在阅读 this page from create-react-app 时找到了解决方案，因为它声明在“您有数千张图像并且需要动态引用它们的路径”时使用公用文件夹。该页面进一步指示使用“%PUBLIC_URL%”或“process.env.PUBLIC_URL”访问“公共”文件夹。使用其中任何一个时，我都会收到“错误：找不到模块”消息。检查后我注意到 'process.env.PUBLIC_URL' 包含一个空字符串，并很快注意到 PUBLIC_URL is ignored in development mode。

我觉得这非常令人困惑，因为“Using the Public Folder”页面显然描述了生产的开发阶段，但它建议使用在开发过程中毫无意义的东西。更让我感到困惑的是，该页面的内容似乎解决了几乎所有过去遇到类似要求的人的问题（example: 1、example: 2；对我来说都失败了）。同样，所有从“src”文件夹构建到“public”文件夹的相对路径的尝试都产生了错误消息。失败代码示例：

let img = process.env.PUBLIC_URL + '/images/Team.jpg';
<img src={require(`${img}`)} alt="X" />

Error: Cannot find module '/images/Team.jpg'

我从没想过在 React 中显示图像会如此困难。非常感谢任何帮助。

Answer 1

我认为你是对的，你只是不需要require，return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;，因为你可以看到他们的docs

如果您在浏览器中打开http://localhost:PORT/images/Team.jpg，它应该会打开。 这就是 process.env.PUBLIC_URL 在开发中为空的原因，因为它们直接解析了此文件夹中的所有内容。