我正在使用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;
};

其他回答

如果您只需要导入单个文件,如README。Md或package。json,那么它可以显式地添加到ModuleScopePlugin()

配置/ paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp('package.json'),
  appReadmeMD:    resolveApp('README.md'),
};

Config /webpack.config.dev.js + Config /webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

您可以尝试使用simlinks,但是相反。

React不会遵循simlink,但是你可以将一些东西移动到源目录,并创建一个simlink到它。

在项目的根目录中,我有一个节点服务器目录,其中有几个模式文件。我想在前端使用它们,所以我:

移动文件/src 在终端,我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE

这为react提供了它所需要的东西,node也很乐意通过simlinks包含文件。

为别人的答案提供更多的信息。关于如何将.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

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

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

then

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

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

在制作《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中遇到同样的问题时,我发现了你的问题,这可能会帮助其他人。