我正在使用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" />
我读过很多东西,说你可以做一个导入的路径,但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题,但他们都告诉我导入标志或形象,所以很明显,我在大局中遗漏了一些东西。
如果你的文件位于公共文件夹,如果你想导入它而不弹出或不使用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”。因此,使用这种模式,您可以访问位于公共文件夹中的资产。
安装这两个包
npm i --save-dev react-app-rewired customize-cra
package.json
"scripts": {
- "start": "react-scripts start"
+ "start": "react-app-rewired start"
},
config-overrides.js
const { removeModuleScopePlugin } = require('customize-cra');
module.exports = function override(config, env) {
if (!config.plugins) {
config.plugins = [];
}
removeModuleScopePlugin()(config);
return config;
};