我正在使用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中遇到同样的问题时，我发现了你的问题，这可能会帮助其他人。
其他回答
把@Flaom写的评论放在这里，标记为回复答案，这实际上挽救了生命:
“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做，你可以从src文件夹外导入，而不用经历弹出应用程序的痛苦。”
Flaom
编辑添加了一些更多的信息@cigien请求。
上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时，我们不能使用公共文件夹中的图像。我自己也有这个问题，读了所有这些答案，我意识到，答案说的是“黑”应用程序，以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说，这是可以的。
就我个人而言，我不希望在我自己的项目中添加改变应用概念的解决方案，特别是在商业项目中。@Flaom解决方案是最简单的，如果将来有任何变化，它可以被另一个解决方案取代。它没有任何风险，可以随时移除，是最简单的。
如果你的图片在公共文件夹中，那么你应该使用
"/images/logo_2016.png"
在<img> SRC中，而不是导入
'../../public/images/logo_2016.png';
这是可行的
<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />
在我的项目中遇到了同样的问题，并在官方的create-react-app文档中找到了这个:https://create-react-app.dev/docs/using-the-public-folder/
有一个“逃生舱口”可以在模块系统之外添加资产:
如果您将文件放入公用文件夹，则它将不会被处理 webpack。相反，它将原封不动地复制到构建文件夹中。来 在公用文件夹中引用资产时，需要使用环境 变量PUBLIC_URL。
下面是他们提供的一个例子:
呈现(){ //注意:这是一个逃生口，应该谨慎使用! //通常我们建议使用' import '来获取资产url //如上面“添加图像和字体”所述。 返回<img src={process.env。PUBLIC_URL + '/img/logo.png'} />; ｝
我能够导入文件src/外部的“复制”文件与file:作为本地依赖。
"dependencies": {
"@my-project/outside-dist": "file:./../../../../dist".
}
then
import {FooComponent} from "@my-project/outside-dist/components";
不需要弹出或react-app-rewired或其他第三方解决方案。
公共文件夹内的图像
use image inside html extension
<img src="%PUBLIC_URL%/resumepic.png"/>
use image inside js extension
<img src={process.env.PUBLIC_URL+"/resumepic.png"}/>
使用图像在js扩展
