我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
这对我来说很有效，不需要安装/更改任何东西
上下文:当我试图使用yarn运行构建生成一个构建时，我得到了这个错误
我所做的事情之间的工作和失败的纱线运行建立
我将ant设计更新到最新的稳定版本(v4.23.5)。
注:我非常相信这与这个版本无关。我提一下只是为了补充一些细节。
这个回答解决了我的问题。但是我没有更改任何访问src目录之外内容的导入。 更改包括更新的包。json,纱线。lock，新的Antd实现(主要是道具的变化)。 为什么构建命令坏了/为什么答案是工作的没有意义。
解决办法
因为所有的变化都与包装有关。json, yarn.lock。我删除了node_modules并清洁安装了所有的包。
Run
yarn
or
npm install
其他回答
这对我来说很有效，不需要安装/更改任何东西
上下文:当我试图使用yarn运行构建生成一个构建时，我得到了这个错误
我所做的事情之间的工作和失败的纱线运行建立
我将ant设计更新到最新的稳定版本(v4.23.5)。
注:我非常相信这与这个版本无关。我提一下只是为了补充一些细节。
这个回答解决了我的问题。但是我没有更改任何访问src目录之外内容的导入。 更改包括更新的包。json,纱线。lock，新的Antd实现(主要是道具的变化)。 为什么构建命令坏了/为什么答案是工作的没有意义。
解决办法
因为所有的变化都与包装有关。json, yarn.lock。我删除了node_modules并清洁安装了所有的包。
Run
yarn
or
npm install
如果您只需要导入单个文件，如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()
]),
]
}
}
公共文件夹内的图像
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扩展
如果你想使用CSS设置背景图像。因此，您必须使用本地主机的URL设置图像并添加图像的路径。请看下面的例子。
.banner {
width: 100%;
height: 100vh;
background-image: url("http://localhost:3000/img/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
}
有一些答案提供了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()
