我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
因此，显然，使用Create-react-app将限制你访问项目根目录以外的图像——通常是src。
解决这个问题的一个快速方法是将图像从public文件夹移动到src文件夹，这样就可以了。 所以你的代码应该是这样的:
background-image: URL('/src/images/img-2.jpg');
其他回答
如果你的图片在公共文件夹中，那么你应该使用
"/images/logo_2016.png"
在<img> SRC中，而不是导入
'../../public/images/logo_2016.png';
这是可行的
<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />
此限制确保所有文件或模块(导出)都在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:注意弹出的后果。
用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;
}
}
};
您不需要弹出，您可以使用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;
};
如果你的文件位于公共文件夹，如果你想导入它而不弹出或不使用react-app-rewired，那么在这种情况下，你可以通过域名和文件的路径访问文件，并使用axios。 示例:在公共文件夹中有一个名为favico.ico的字体文件。你想把它导入到src中的一个文件中。你 可以使用以下逻辑访问字体。
axios.get('example.com/favico.ico').then(() => {
// here you can access this file.
})
在上面的例子中，example.com是域名。如果您有不同的环境，如本地主机，登台，生产，那么在这种情况下，域名是不同的。 因此，要获得favico.ico，您可以使用以下逻辑。
axios.get(`${window.location.origin}/favico.ico`).then(() => {
// here you can access this file.
})
在上面的例子中，window.location.origin会给你当前的域，如果你在本地运行你的代码，它会给你http://localhost:{portnumber}， 如果您的代码运行在生产域中，并且生产域是example.com，那么它将为您提供“example.com”。因此，使用这种模式，您可以访问位于公共文件夹中的资产。
