开发中的React动态图像导入

Question

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

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

在阅读this page from create-react-app时，我想我已经找到了解决方案，因为它指出，当“您有成千上万的图像并且需要动态引用它们的路径”时，可以使用公共文件夹。该页面进一步指示使用'%PUBLIC_URL%‘或'process.env.PUBLIC_URL’来访问'public‘文件夹。当使用其中任何一个时，我收到一条“错误:无法找到模块”的消息。在检查时，我注意到'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，则应该会打开该your。这就是process.env.PUBLIC_URL在开发中为空的原因，因为它们直接解析此文件夹中的所有内容。