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

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


当前回答

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

其他回答

您不需要弹出,您可以使用rescripts库修改react-scripts配置

这样就可以了:

module.exports = config => {
  const scopePluginIndex = config.resolve.plugins.findIndex(
    ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
  );

  config.resolve.plugins.splice(scopePluginIndex, 1);

  return config;
};

为别人的答案提供更多的信息。关于如何将.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设置背景图像。因此,您必须使用本地主机的URL设置图像并添加图像的路径。请看下面的例子。

.banner {
  width: 100%;
  height: 100vh;
  background-image: url("http://localhost:3000/img/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

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

上下文:当我试图使用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或其他第三方解决方案。