React：如何在 src 和公共文件夹之外加载图像

Posted 2023-02-21

【中文标题】React：如何在 src 和公共文件夹之外加载图像

【英文标题】：React : how to load image outside src and public folders

【发布时间】：2020-05-22 15:06:15

【问题描述】：

我的项目就是这种结构：

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

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

<img src="db/images/img_1.jpg">

使用 src 在 db/images 文件夹中获取图像，完全在 react 应用之外？

感谢您的回复

【问题讨论】：

在你的情况下，我认为 react 不能从你的根文件夹 ui 之外获取项目。我记得看到过错误，但我也可能是错的

【参考方案1】：

create-react-app 包使用了一个名为 ModuleScopePlugin 的 Webpack 插件，它会导致这种行为

您可以使用包 customize-cra 覆盖 webpack 配置。

custom-cra 有一种方法可以解决您的问题。

removeModuleScopePlugin

或者您可以从 create-react-app 中弹出并在 webpack 中手动删除此配置

【参考方案2】：

如果您只是不希望在上传文件时重新加载，您可以在 webpack 配置中忽略文件上传到的文件夹

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

【参考方案3】：

另一种选择是将图像放入您的src 并以反应方式引用它。考虑以下几点：

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

app.js

import img from "./img_1.jpg";

然后在你的渲染img标签中

<img src=img />

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

如果实际上有 0 种方式将图像移动到您的 react 项目中，我能想到的唯一方法是将图像上传到某处并从文字链接中引用它们，例如 S3

【讨论】：

我尝试了这个解决方案，但由于您可以在我的应用程序中从 react 上传文件，因此每次上传内容时我的开发服务器都会重新加载（因为 src 文件夹已更新）。这就是为什么我希望它们完全从 React 应用中分离出来

为什么要防止热重载？

我希望应用程序在更新代码并保存时重新加载，但是当我从 react 应用程序上传图像并将它们存储在 src 文件夹中时，应用程序会自动重新加载，这很令人不安