我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
此限制确保所有文件或模块(导出)都在src/目录中，实现在./node_modules/react-dev-utils/ModuleScopePlugin.js中，在以下代码行中。
// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
if (relative.startsWith('../') || relative.startsWith('..\\')) {
return callback();
}
您可以通过
修改这段代码(不推荐) 或者执行eject，然后从目录中删除ModuleScopePlugin.js。 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');从。/ node_modules / react-scripts / config / webpack.config.dev.js
PS:注意弹出的后果。
其他回答
你需要移动WC-BlackonWhite.jpg到你的src目录。public目录是用于直接链接到HTML中的静态文件(如favicon)，而不是用于直接导入到bundle中的内容。
为别人的答案提供更多的信息。关于如何将.png文件交付给用户，您有两个选项。文件结构应该与您选择的方法一致。这两个选项是:
使用react-create-app提供的模块系统(import x from y)，并将其捆绑到你的JS中。将图像放在src文件夹中。 从公用文件夹提供该文件，并让Node提供该文件。Create-react-app显然还附带了一个环境变量，例如<img src={process.env。PUBLIC_URL + '/img/logo.png'} />;。这意味着你可以在你的React应用中引用它，但仍然可以通过Node提供服务，你的浏览器会在一个正常的GET请求中单独请求它。
来源:create-react-app
您可以尝试使用simlinks，但是相反。
React不会遵循simlink，但是你可以将一些东西移动到源目录，并创建一个simlink到它。
在项目的根目录中，我有一个节点服务器目录，其中有几个模式文件。我想在前端使用它们，所以我:
移动文件/src 在终端，我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE
这为react提供了它所需要的东西，node也很乐意通过simlinks包含文件。
我认为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;
};
如果你的图片在公共文件夹中，那么你应该使用
"/images/logo_2016.png"
在<img> SRC中，而不是导入
'../../public/images/logo_2016.png';
这是可行的
<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />
