Node.js 反应：如何在src和公用文件夹外加载图像

我的项目作为这种结构：

├── api
├── db
│   └── images
├── ui
│   └── public
│   └── src
│   |    └── App.js

我的应用程序是使用create react app创建的，因此我无法导入src目录之外的文件，并且我不希望这些图像位于公用文件夹中：我如何才能拥有

img

标记：

src在db/images文件夹上获取图像，完全在react应用程序之外

---

感谢您的回复

另一种选择是将图像放入

src

中，并以一种反应方式引用它。考虑以下事项：

├── ui
│   └── public
│   └── src
│   |    └── App.js
         └── img_1.jpg

app.js

从“/img_1.jpg”导入img

然后在渲染
img
标记中


希望这对你有用？iirc这将防止有人从您的公用文件夹热加载图像

如果真的有0种方法可以将图像移动到react项目中，那么我唯一能想到的方法就是将图像上传到某个地方，并从文本链接引用它们，例如S3
如果您只是不想在上传文件时重新加载图像，那么您可以在您的网页包配置中忽略文件上传到的文件夹

devServer: {
    ...
    watchOptions: {
        ignored: './src/images/**/.*',
    },
    ...
}

create-react应用程序包使用一个名为
ModuleScopePlugin
的网页插件，该插件会导致此行为

您可以使用该包覆盖Web包配置

自定义cra有一种方法可以解决您的问题


或者，您可以从create react应用程序中弹出，并在网页中手动删除此配置
我认为react无法从您的根文件夹
ui
之外获取项目。我记得看到了错误，但我可能也错了。我尝试了这个解决方案，但因为你可以在我的应用程序中从react上传文件，所以每次我上传东西时，我的开发服务器都会重新加载（因为src文件夹被更新）。这就是为什么我希望它们与react应用程序完全分离的原因。为什么要阻止热重新加载？我希望在更新代码并保存时重新加载应用程序，但当我从react应用程序上载图像并将其存储在src文件夹中时，应用程序会自动重新加载，这令人不安