我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
我认为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;
};
其他回答
我能够导入文件src/外部的“复制”文件与file:作为本地依赖。
"dependencies": {
"@my-project/outside-dist": "file:./../../../../dist".
}
then
import {FooComponent} from "@my-project/outside-dist/components";
不需要弹出或react-app-rewired或其他第三方解决方案。
这是create-react-app开发者添加的特殊限制。它在ModuleScopePlugin中实现，以确保文件驻留在src/中。该插件确保从应用程序的源目录导入的相对文件不会到达应用程序的外部。
除了使用eject和修改webpack配置，没有任何官方方法可以禁用此功能。
但是，大多数功能及其更新都隐藏在创建-反应-应用程序系统的内部。如果你让弹出你将没有更多的新功能和它的更新。因此，如果你还没有准备好管理和配置应用程序，包括配置webpack等-不要做弹出操作。
发挥现有的规则-移动资产到src或使用基于公共文件夹url没有导入。
然而，有许多非官方的解决方案，而不是驱逐 Rewire允许你以编程方式修改webpack配置而不弹出。但是删除ModuleScopePlugin插件并不好——这失去了一些保护，并且没有添加src中可用的一些特性。ModuleScopePlugin被设计为支持多个文件夹。
更好的方法是添加完全工作的附加目录，类似于src，也受ModuleScopePlugin保护。这可以使用react-app-alias来完成
无论如何，不要从公共文件夹导入-这将在构建文件夹中复制，并将通过两个不同的url(和不同的加载方式)可用，这最终会恶化包的下载大小。
从src文件夹导入是更可取的，它有很多优点。所有东西都将通过webpack打包到包中，以块的最佳大小和最佳的加载效率。
因此，显然，使用Create-react-app将限制你访问项目根目录以外的图像——通常是src。
解决这个问题的一个快速方法是将图像从public文件夹移动到src文件夹，这样就可以了。 所以你的代码应该是这样的:
background-image: URL('/src/images/img-2.jpg');
这可以直接完成，而无需使用公共文件夹的路径。 你可以这样做
<img src="/images/image-name" alt=""/>
这是因为我们没有在浏览器中使用App.js。由于index.html是在浏览器本身执行的，图像的路径已经在包含index.html文件的公共文件夹中
如果你想从公共目录访问CSS文件，你可能会遇到OUTSIDE OF SOURCE DIRECTORY错误
或者，您可以在index.html中链接此文件，该文件也位于公共目录中。
<link rel="stylesheet" href="App.css">
