我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
如果你想从公共目录访问CSS文件，你可能会遇到OUTSIDE OF SOURCE DIRECTORY错误
或者，您可以在index.html中链接此文件，该文件也位于公共目录中。
<link rel="stylesheet" href="App.css">
其他回答
我能够导入文件src/外部的“复制”文件与file:作为本地依赖。
"dependencies": {
"@my-project/outside-dist": "file:./../../../../dist".
}
then
import {FooComponent} from "@my-project/outside-dist/components";
不需要弹出或react-app-rewired或其他第三方解决方案。
因此，显然，使用Create-react-app将限制你访问项目根目录以外的图像——通常是src。
解决这个问题的一个快速方法是将图像从public文件夹移动到src文件夹，这样就可以了。 所以你的代码应该是这样的:
background-image: URL('/src/images/img-2.jpg');
如果你的文件位于公共文件夹，如果你想导入它而不弹出或不使用react-app-rewired，那么在这种情况下，你可以通过域名和文件的路径访问文件，并使用axios。 示例:在公共文件夹中有一个名为favico.ico的字体文件。你想把它导入到src中的一个文件中。你 可以使用以下逻辑访问字体。
axios.get('example.com/favico.ico').then(() => {
// here you can access this file.
})
在上面的例子中，example.com是域名。如果您有不同的环境，如本地主机，登台，生产，那么在这种情况下，域名是不同的。 因此，要获得favico.ico，您可以使用以下逻辑。
axios.get(`${window.location.origin}/favico.ico`).then(() => {
// here you can access this file.
})
在上面的例子中，window.location.origin会给你当前的域，如果你在本地运行你的代码，它会给你http://localhost:{portnumber}， 如果您的代码运行在生产域中，并且生产域是example.com，那么它将为您提供“example.com”。因此，使用这种模式，您可以访问位于公共文件夹中的资产。
您可以尝试使用simlinks，但是相反。
React不会遵循simlink，但是你可以将一些东西移动到源目录，并创建一个simlink到它。
在项目的根目录中，我有一个节点服务器目录，其中有几个模式文件。我想在前端使用它们，所以我:
移动文件/src 在终端，我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE
这为react提供了它所需要的东西，node也很乐意通过simlinks包含文件。
把@Flaom写的评论放在这里，标记为回复答案，这实际上挽救了生命:
“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做，你可以从src文件夹外导入，而不用经历弹出应用程序的痛苦。”
Flaom
编辑添加了一些更多的信息@cigien请求。
上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时，我们不能使用公共文件夹中的图像。我自己也有这个问题，读了所有这些答案，我意识到，答案说的是“黑”应用程序，以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说，这是可以的。
就我个人而言，我不希望在我自己的项目中添加改变应用概念的解决方案，特别是在商业项目中。@Flaom解决方案是最简单的，如果将来有任何变化，它可以被另一个解决方案取代。它没有任何风险，可以随时移除，是最简单的。
