css - 在 CSS 中使用图像 url 时，React 应用程序编译失败

Question

我正在尝试使用 css 及其 url 功能向 ReactJS 元素中的控件添加背景图像。

.jumbotron {
    background-image: url(../images/image.jpeg); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: 6b6b6b;
}

但是，加载程序正在中断，因为它正在尝试解析二进制文件。意想不到的字符。删除背景线，一切正常。

我正在使用 webpack，我的模块是这样加载的:

module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                rules: [
                  {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]
                  }
                ]
              }
        ]
    }

如何让我的 React 应用程序将此 css 图像用作背景 url？使用 create-react-app 创建元素 - 它有效，但我看不到它是如何处理图像的。

我有一个 repo 协议(protocol): https://github.com/CraigInBrisbane/ReactLearning

任何帮助都会很棒。

Answer 1

当你使用 css-loader 时，webpack 会删除你所有的 background-image: url(../images/image.jpeg); 并插入 require (../images/image.jpeg)。有两种方法可以解决这个问题:

1) 为这些类型的文件添加file-loader/url-loader

2) 使用绝对路径而不是相对路径 ( background-image: url(/images/image.jpeg); ) 并且 css-loader 将跳过此图像