Question

我正在尝试使用css及其url功能将背景图像添加到ReactJS项目中的控件。

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

但是，加载器正在破坏，因为它正在尝试解析二进制文件。一个意外的char。删除背景线，所有工作。

我正在使用webpack，我的模块加载如下：

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

如何让我的反应应用程序使用此css图像作为背景网址？使用create-react-app创建项目 - 它可以工作，但我看不出它是如何处理图像的。

我有一个回购： https://github.com/CraigInBrisbane/ReactLearning

任何帮助都会很棒。

Answer 1

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

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

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

在CSS中使用图像URL时，React app无法编译

1 个答案: