css background-images не загружается в компонент реагирования веб-пакета

Question

не уверен, что я делаю неправильно, я могу отобразить изображение, если просто прикреплю изображение, однако хочу, чтобы оно было в качестве фонового изображения, чтобы я мог поместить текст перед ним.

Но когда я пытаюсь установить его в качестве фонового изображения, изображение больше не будет загружаться, даже после того, как я увеличил родительский div и в web-dev-middleware div расширился.

import React from 'react';
import { Jumbotron } from 'react-bootstrap';

import JumboImage from '../../css/images/homePagePicJumbo.jpg';

const styles = {
  homepage: {
    height: 500,
    width: 'auto',
  },
  image: {
    backgroundimage: JumboImage,
  },
};

export default function HomePage() {
  return (
    <Jumbotron id="HomePageJumbotron" style={styles.homepage}>
      <div style={styles.image}>Hello world</div>
    </Jumbotron>
  );

const webpack = require('webpack');
const { resolve } = require('path');


const jsOutput = {
  filename: 'build.js',
  path: resolve(__dirname),
  publicPath: '/',
};

module.exports = {
  mode: 'development',
  // where the starting point is
  context: resolve(__dirname, 'src'),
  // where to look for the main page for entry
  entry: [
    'webpack-hot-middleware/client',
    './index.jsx',
  ],
  // where to generate the bundle file in
  output: jsOutput,
  // tells webpack to only look at js or jsx files
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  // where to use babel (or any other loader) to transpile the source before output (convert to es5)
  module: {
    // rules are objects can be more than one
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components|public\/)/,
        loader: 'babel-loader',
      },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components|public\/)/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        exclude: /(node_modules|bower_components|public\/)/,
        use: [{
          loader: 'style-loader', // creates style nodes from JS strings
        }, {
          loader: 'css-loader', // translates CSS into CommonJS
        }, {
          loader: 'sass-loader', // compiles Sass to CSS
        }],
      },
      {
        test: /\.(png|jpg|)$/,
        loader: 'url-loader',
        options: {
          fallback: 'file-loader',
        },
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
};

Answer 1

Я думаю, что есть две проблемы:

1. Может быть чувствительным к регистру. Вы хотите backroundImage, а не backgroundimage.
2. Вам нужен оператор CSS URL. Попробуйте backgroundImage: `url(${JumboImage})`