我正在使用create-react-app。我试图从我的src/components内部的文件中调用我的公共文件夹中的图像。我收到这个错误信息。
./src/components/website_index.js模块未找到:你试图 import ../../public/images/logo/WC-BlackonWhite.jpg 在项目src/目录之外。国外的相对进口 Src /不支持。您可以将它移动到src/，或者添加一个 从项目的node_modules/到它的符号链接。
从“../../public/images/logo_2016.png”导入logo; <img className="Header-logo" src={logo} alt=" logo" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
公共文件夹内的图像
use image inside html extension
<img src="%PUBLIC_URL%/resumepic.png"/>
use image inside js extension
<img src={process.env.PUBLIC_URL+"/resumepic.png"}/>
使用图像在js扩展
其他回答
如果你的图片在公共文件夹中，那么你应该使用
"/images/logo_2016.png"
在<img> SRC中，而不是导入
'../../public/images/logo_2016.png';
这是可行的
<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />
安装这两个包
npm i --save-dev react-app-rewired customize-cra
package.json
"scripts": {
- "start": "react-scripts start"
+ "start": "react-app-rewired start"
},
config-overrides.js
const { removeModuleScopePlugin } = require('customize-cra');
module.exports = function override(config, env) {
if (!config.plugins) {
config.plugins = [];
}
removeModuleScopePlugin()(config);
return config;
};
这是一个相对导入的问题，这可能是因为我们使用了“create-react-app project”命令，该命令形成了一个名为project的目录，其中包含node_modules文件夹和其中的public和src文件夹中的其他几个文件。 create-react-app命令设置了一个限制，我们不能从src外部导入任何东西。
我的问题:
我必须导入在src文件夹外的node_modules文件夹中创建的react-bootstrap css文件。 我使用导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”;但是我在终端上得到了错误。 我发现我可以创建一个新的react应用程序，并遵循从a到G的解决步骤，以解决这个问题。
解决方案: A)创建一个新的react应用，使用Create -react-app new
B) cd new
C)运行以下命令:"npm install react-bootstrap bootstrap@4.6.0"(不带""双引号)
D)在你的react文件中导入bootstrap: D.1)导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”; 或 D.2)从“react-bootstrap/Button”导入按钮;
E)在你的react文件中创建一个类似Button或任何东西的引导元素，用于D.1) < Button className="btn btn-success" >引导< / Button > 或 2) <按钮变量="primary"> Bootstrap < /按钮>
F)在终端:cd src
G)在终端:npm启动，
这一次它将被成功编译。
推理: 当我按顺序执行步骤A到G时，我可以看到react-bootstrap终于开始工作了，这一次我没有得到任何错误。 (我想到这个解决方案是因为:
我已经使用npm安装“@material-ui/icons”，它被安装在src之外的node_modules文件夹中。 在我的react文件中，我使用了import Add from“@material-ui/icons/Add” 材质界面图标对我来说工作得很好， 但这里我们也从src外部导入，从node_modules..一切都很正常。为什么这次从src外部导入没有错误) 这就是为什么我刚刚创建了一个新的react应用程序，并遵循解决方案步骤a到G。
公共文件夹内的图像
use image inside html extension
<img src="%PUBLIC_URL%/resumepic.png"/>
use image inside js extension
<img src={process.env.PUBLIC_URL+"/resumepic.png"}/>
使用图像在js扩展
我认为Lukas Bach的解决方案使用react-app-rewired来修改webpack配置是一个很好的方法，但是，我不会排除整个ModuleScopePlugin，而是将可以从src导入的特定文件列入白名单:
config-overrides.js
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");
module.exports = function override(config) {
config.resolve.plugins.forEach(plugin => {
if (plugin instanceof ModuleScopePlugin) {
plugin.allowedFiles.add(path.resolve("./config.json"));
}
});
return config;
};
