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

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


当前回答

如果你需要多次修改,比如使用蚂蚁设计,你可以像这样组合多个功能:

const {
  override,
  removeModuleScopePlugin,
  fixBabelImports,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  removeModuleScopePlugin(),
);

其他回答

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

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

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

这是我的代码:

import React from 'react';

import './Navbar.scss';
import {images} from '../../constants';
const Navbar = () => {
    return (
        <nav>
            <div>
                < img src = {images.logo} alt = "logo" />

            </div>

        </nav>
    );
}

export default Navbar;

也改了:

import React from 'react';

import './Navbar.scss';
import {images} from '././constants';
const Navbar = () => {
    return (
        <nav>
            <div>
                < img src = {images.logo} alt = "logo" />

            </div>

        </nav>
    );
}

export default Navbar;

它成功了!我越来越擅长修复bug,哈哈。

如果你的图片在公共文件夹中,那么你应该使用

"/images/logo_2016.png"

在<img> SRC中,而不是导入

'../../public/images/logo_2016.png'; 

这是可行的

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

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

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

then

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

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

此限制确保所有文件或模块(导出)都在src/目录中,实现在./node_modules/react-dev-utils/ModuleScopePlugin.js中,在以下代码行中。

// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
     const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
     if (relative.startsWith('../') || relative.startsWith('..\\')) {
        return callback();
      }

您可以通过

修改这段代码(不推荐) 或者执行eject,然后从目录中删除ModuleScopePlugin.js。 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');从。/ node_modules / react-scripts / config / webpack.config.dev.js

PS:注意弹出的后果。