我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
在制作《Truffle》时，我不得不克服同样的问题。解决方案如下:
由于Create-React-App的默认行为不允许从src文件夹外导入文件，我们需要将build文件夹中的合同带到src内。我们可以在每次编译合同时复制并粘贴它们，但更好的方法是简单地配置Truffle将文件放在那里。
在“truffle-config.js”文件中，替换如下内容:
const path = require("path");
module.exports = {
contracts_build_directory: path.join(__dirname, "client/src/contracts")
};
我不知道这是否对你有帮助，但我知道当我在Truffle中遇到同样的问题时，我发现了你的问题，这可能会帮助其他人。
其他回答
为别人的答案提供更多的信息。关于如何将.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
如果你想从公共目录访问CSS文件，你可能会遇到OUTSIDE OF SOURCE DIRECTORY错误
或者，您可以在index.html中链接此文件，该文件也位于公共目录中。
<link rel="stylesheet" href="App.css">
再加上Bartek Maciejiczek的回答，下面是Craco的情况:
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");
module.exports = {
webpack: {
configure: webpackConfig => {
webpackConfig.resolve.plugins.forEach(plugin => {
if (plugin instanceof ModuleScopePlugin) {
plugin.allowedFiles.add(path.resolve("./config.json"));
}
});
return webpackConfig;
}
}
};
我之前的解决方案适用于Webpack 4，但不适用于Webpack 5。在浏览了从那时起积累的解决方法之后，我发现下面的方法非常简单(而且似乎是可扩展的)。
import { CracoAliasPlugin } from 'react-app-alias';
const cracoConfig = {
plugins: [
{
plugin: CracoAliasPlugin,
options: {
alias: { '~': './' },
},
},
],
}
然后像这样导入:
import whatever from '~/<path-to-file>';
这对我来说很有效，不需要安装/更改任何东西
上下文:当我试图使用yarn运行构建生成一个构建时，我得到了这个错误
我所做的事情之间的工作和失败的纱线运行建立
我将ant设计更新到最新的稳定版本(v4.23.5)。
注:我非常相信这与这个版本无关。我提一下只是为了补充一些细节。
这个回答解决了我的问题。但是我没有更改任何访问src目录之外内容的导入。 更改包括更新的包。json,纱线。lock，新的Antd实现(主要是道具的变化)。 为什么构建命令坏了/为什么答案是工作的没有意义。
解决办法
因为所有的变化都与包装有关。json, yarn.lock。我删除了node_modules并清洁安装了所有的包。
Run
yarn
or
npm install
您可以尝试使用simlinks，但是相反。
React不会遵循simlink，但是你可以将一些东西移动到源目录，并创建一个simlink到它。
在项目的根目录中，我有一个节点服务器目录，其中有几个模式文件。我想在前端使用它们，所以我:
移动文件/src 在终端，我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE
这为react提供了它所需要的东西，node也很乐意通过simlinks包含文件。
