我正在使用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" />

我读过很多东西,说你可以做一个导入的路径,但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题,但他们都告诉我导入标志或形象,所以很明显,我在大局中遗漏了一些东西。


当前回答

这对我来说很有效,不需要安装/更改任何东西

上下文:当我试图使用yarn运行构建生成一个构建时,我得到了这个错误

我所做的事情之间的工作和失败的纱线运行建立

我将ant设计更新到最新的稳定版本(v4.23.5)。

注:我非常相信这与这个版本无关。我提一下只是为了补充一些细节。

这个回答解决了我的问题。但是我没有更改任何访问src目录之外内容的导入。 更改包括更新的包。json,纱线。lock,新的Antd实现(主要是道具的变化)。 为什么构建命令坏了/为什么答案是工作的没有意义。

解决办法

因为所有的变化都与包装有关。json, yarn.lock。我删除了node_modules并清洁安装了所有的包。

Run

yarn

or

npm install

其他回答

我能够导入文件src/外部的“复制”文件与file:作为本地依赖。

"dependencies": {
    "@my-project/outside-dist": "file:./../../../../dist".
}

then

import {FooComponent} from "@my-project/outside-dist/components";

不需要弹出或react-app-rewired或其他第三方解决方案。

我认为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;
};

这可以直接完成,而无需使用公共文件夹的路径。 你可以这样做

<img src="/images/image-name" alt=""/>

这是因为我们没有在浏览器中使用App.js。由于index.html是在浏览器本身执行的,图像的路径已经在包含index.html文件的公共文件夹中

把@Flaom写的评论放在这里,标记为回复答案,这实际上挽救了生命:

“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做,你可以从src文件夹外导入,而不用经历弹出应用程序的痛苦。”

Flaom

编辑添加了一些更多的信息@cigien请求。

上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时,我们不能使用公共文件夹中的图像。我自己也有这个问题,读了所有这些答案,我意识到,答案说的是“黑”应用程序,以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说,这是可以的。

就我个人而言,我不希望在我自己的项目中添加改变应用概念的解决方案,特别是在商业项目中。@Flaom解决方案是最简单的,如果将来有任何变化,它可以被另一个解决方案取代。它没有任何风险,可以随时移除,是最简单的。

因此,显然,使用Create-react-app将限制你访问项目根目录以外的图像——通常是src。

解决这个问题的一个快速方法是将图像从public文件夹移动到src文件夹,这样就可以了。 所以你的代码应该是这样的:

background-image: URL('/src/images/img-2.jpg');