react & webpack4背景-大小无效

Question

我是个新手，用React环境设置了webpack。我现在的问题是背景大小和背景图像对我在react组件中设置的背景图像不起作用。当我在同一文件中设置背景图像和背景的大小和位置时，它可以工作。换句话说，当我在component中设置图像，并在scss中定义背景大小和位置时，它不起作用。我相信是我的webpack设置导致了这个问题。

- -webpack-

  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  },
  {
    test: /\.s[ac]ss/i,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  },
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader'],
  },

-组件-

  <div className="image"
    style={{
      background: `url(${imageUrl})`,
    }}/>

-scss-

.image {
        width: 100%;
        height: 95%;
        background-size: cover;
        background-position: center;
        margin-bottom: 5px;
      }

有了这个源码，我得到的结果是显示了图像，但是图像没有覆盖。

Answer 1

图像不会覆盖，因为您用内联background默认样式覆盖了背景属性。记住，内联风格在这里具有最大的优先级。

而不是：

<div className="image"
    style={{
    background: `url(${imageUrl})`,
}}/>

定义背景图像：

<div className="image"
    style={{
    background-image: `url(${imageUrl})`,
}}/>