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

Question

我的项目是这种结构：

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

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

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

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

谢谢您的回复

Answer 1

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

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

应用程序.js

import img from "./img_1.jpg";

然后在你的渲染img标签中

<img src={img} />

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

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

Answer 2

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

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

Answer 3

create-react-app 包使用名为ModuleScopePlugin插件导致此行为

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

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

移除模块范围插件

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