Question

不确定我做错了什么，如果我只是附加图像，我可以显示图像，但是我想把它作为背景图像，所以我可以把文字放在它前面。

但是当我尝试将其设置为背景图像时，图像将不再加载，即使我将父div设置得更大并且在web-dev-middleware中div已经扩展。

＆＃13;

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>
  );

＆＃13;

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(),
  ],
};

＆＃13;

Answer 1

我认为有两个问题：

可能区分大小写。您需要backroundImage而不是backgroundimage。
您需要一个CSS URL语句。试试backgroundImage: `url(${JumboImage})`

css background-images不会加载webpack react组件

1 个答案: