无法在 Reactjs、Webpack 中加载背景图片答案

【问题标题】：Not able to load background image in Reactjs, Webpack无法在 Reactjs、Webpack 中加载背景图片
【发布时间】：2018-10-24 05:37:29
【问题描述】：

我正在尝试从自定义 css 文件加载 React 项目中的背景图像。我正在使用 Webpack 4。

.bgimage {
  height: 100vh;
  background: url('../images/header.jpg');
}

但我的图像没有显示，我在控制台中出现此错误：

ERROR in ./src/app/assets/images/header.jpg
Module build failed: SyntaxError: Unexpected character '�' (1:0)

我尝试将 url-loader 添加到我的 webpack.config.js

 {
   test: /\.(png|jpg|gif)$/,
   loader: "url-loader",
   query: { mimetype: "image/png" }
 }

但没有显示静止图像。

【问题讨论】：

我猜你的 webpack 配置有问题。 css-loader 可能有问题
尝试 backgroundImage: "url(" ../images/header.jpg ")"，如果你使用的是 es6，请先导入图像并将值添加为 backgroundImage: "url(" + Background + ")" - 这将确保在页面上获取图像

【解决方案1】：

解决方案：

我找到了适合我的解决方案。我还安装了file-loader 并显示了我的背景图像。

希望有人会觉得它有用。

【讨论】：