reactjs - 在React JS中添加背景图片

Question

我决定在 React 中使用内联 JS 样式。除了图像之外一切都很好。在这里，我尝试向 div 添加背景图像，但出现错误。

import React, {Component} from 'react';
import ReactDOM from "react-dom";

var styles = {
color:'violet',
backgroundImage: 'url(' + require('./sun.png') + ')' 
};

class App extends React.Component {
  render() {
    return (
    <div>
        <h1>How to make smth</h1>
        <div style={styles}>test</div>
    </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

我收到错误，我只是不知道我需要什么加载器以及如何将其添加到 webpack 配置(或 package.json)

here is what i get

Answer 1

尝试

import React, {Component} from 'react';
import ReactDOM from "react-dom";
import image from './sun.png';

var styles = {
color:'violet',
backgroundImage: 'url('+image+')'
};

添加加载器:在 webpack 配置中，您正在使用更改

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ] 

到

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      },
      {
        test: /\.png$/,
        loader: "url-loader",
        query: { mimetype: "image/png" }
      }
    ]