我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
如果你的图片在公共文件夹中，那么你应该使用
"/images/logo_2016.png"
在<img> SRC中，而不是导入
'../../public/images/logo_2016.png';
这是可行的
<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />
其他回答
下面是一个在简单情况下工作得很好的替代方案(使用fs和ncp)。在开发过程中，保持一个脚本运行，以监视/src之外的共享文件夹的更改。当进行更改时，脚本可以自动将共享文件夹复制到项目中。下面是递归地查看单个目录的示例:
// This should be run from the root of your project
const fs = require('fs')
const ncp = require('ncp').ncp;
ncp.limit = 16
// Watch for file changes to your shared directory outside of /src
fs.watch('../shared', { recursive: true }, (eventType, filename) => {
console.log(`${eventType}: ${filename}`)
// Copy the shared folder straight to your project /src
// You could be smarter here and only copy the changed file
ncp('../shared', './src/shared', function(err) {
if (err) {
return console.error(err);
}
console.log('finished syncing!');
});
})
这可以直接完成，而无需使用公共文件夹的路径。 你可以这样做
<img src="/images/image-name" alt=""/>
这是因为我们没有在浏览器中使用App.js。由于index.html是在浏览器本身执行的，图像的路径已经在包含index.html文件的公共文件夹中
公共文件夹内的图像
use image inside html extension
<img src="%PUBLIC_URL%/resumepic.png"/>
use image inside js extension
<img src={process.env.PUBLIC_URL+"/resumepic.png"}/>
使用图像在js扩展
有一些答案提供了react-app-rewired的解决方案，但customize-cra包括一个removeModuleScopePlugin() API，它更优雅一些。(这是相同的解决方案，但被customize-cra包抽象了。)
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 = removeModuleScopePlugin()
用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;
}
}
};
