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

我认为您是对的，只是不需要Trans_NPD_Row.Interior.Color = xlNone，require，因为您可以看到他们的docs

如果在浏览器return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;中打开，则应打开。这就是http://localhost:PORT/images/Team.jpg在开发中为空的原因，因为它们直接解析了此文件夹中的所有内容。

在开发中反应动态图像导入

1 个答案: