我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
我能够导入文件src/外部的“复制”文件与file:作为本地依赖。
"dependencies": {
"@my-project/outside-dist": "file:./../../../../dist".
}
then
import {FooComponent} from "@my-project/outside-dist/components";
不需要弹出或react-app-rewired或其他第三方解决方案。
其他回答
您可以尝试使用simlinks，但是相反。
React不会遵循simlink，但是你可以将一些东西移动到源目录，并创建一个simlink到它。
在项目的根目录中，我有一个节点服务器目录，其中有几个模式文件。我想在前端使用它们，所以我:
移动文件/src 在终端，我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE
这为react提供了它所需要的东西，node也很乐意通过simlinks包含文件。
这是我的代码:
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，哈哈。
如果您只需要导入单个文件，如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()
]),
]
}
}
用Craco去除:
module.exports = {
webpack: {
configure: webpackConfig => {
const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
);
webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
return webpackConfig;
}
}
};
因此，显然，使用Create-react-app将限制你访问项目根目录以外的图像——通常是src。
解决这个问题的一个快速方法是将图像从public文件夹移动到src文件夹，这样就可以了。 所以你的代码应该是这样的:
background-image: URL('/src/images/img-2.jpg');
