我正在使用 create-react-app。我正在尝试从我的src/components. 我收到此错误消息。
./src/components/website_index.js 未找到module：您试图导入 ../../public/images/logo/WC-BlackonWhite.jpg ，它位于项目 src/ 目录之外。不支持 src/ 之外的相对导入。您可以将其移动到 src/ 中，也可以从项目的 node_modules/ 中向其添加符号链接。
import logo from '../../public/images/logo_2016.png';
<img className="Header-logo" src={logo} alt="Logo" />
我读过很多东西说你可以对路径进行导入，但这对我来说仍然不起作用。任何帮助将不胜感激。我知道有很多这样的问题，但它们都告诉我要导入徽标或图像，所以很明显我在大局中遗漏了一些东西。
这是 create-react-app 的开发者添加的特殊限制。它被实现ModuleScopePlugin以确保文件驻留在src/. 该插件确保来自应用程序源目录的相对导入不会到达它之外。
除了使用eject和修改 webpack 配置外，没有官方方法可以禁用此功能。
但是，大多数功能及其更新都隐藏在 create-react-app 系统的内部。如果您制作，eject您将不再有新功能及其更新。所以如果你还没有准备好管理和配置包含的应用程序来配置 webpack 等等 - 不要做eject操作。
按照现有规则进行操作 - 将资产移动到 src 或根据public文件夹 url 使用而无需导入。
但是不是eject也有很多非官方的解决方案的基础上，
再布线，让您以编程方式修改没有的WebPack配置eject。但除去该ModuleScopePlugin插件并不好-这失去了一些保护，不添加了一些功能可用src。ModuleScopePlugin旨在支持多个文件夹。
更好的方法是添加完全工作的附加目录，类似于src也受ModuleScopePlugin. 这可以使用react-app-rewire-alias来完成
无论如何不要从public文件夹导入- 这将在build文件夹中复制，并且可以通过两个不同的 url（以及不同的加载方式）使用，这最终会恶化包下载的大小。
从src文件夹导入是可取的，并且具有优势。一切都将由 webpack 打包到具有最佳大小的块和最佳加载效率的包中。
包react-app-rewired可用于删除插件。这样您就不必弹出。
按照 npm 包页面上的步骤（安装包并翻转 package.json 文件中的调用）并使用config-overrides.js与此类似的文件：
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
module.exports = function override(config, env) {
config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
return config;
};
这将从使用的 WebPack 插件中删除 ModuleScopePlugin，但保留其余部分并消除弹出的必要性。
如果您的图像在公共文件夹中，那么您应该使用
"/images/logo_2016.png"
在你<img> src而不是进口
'../../public/images/logo_2016.png';
这将工作
<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />
使用 Craco 删除它：
module.exports = {
webpack: {
configure: webpackConfig => {
const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
);
webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
return webpackConfig;
}
}
};
为其他人的答案提供更多信息。关于如何将 .png 文件交付给用户，您有两种选择。文件结构应符合您选择的方法。这两个选项是：
使用import x from yreact-create-app 提供的module系统 ( ) 并将其与您的 JS 捆绑在一起。将图像放在src文件夹中。
从public文件夹中提供它，让 Node 提供文件。create-react-app 显然也带有一个环境变量，例如<img src={process.env.PUBLIC_URL + '/img/logo.png'} />;. 这意味着你可以在你的 React 应用程序中引用它，但仍然通过 Node 提供它，你的浏览器在普通的 GET 请求中单独请求它。
来源：创建react应用程序