添加背景圖片陣營JS

Question

我決定反應使用內聯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" } 
     } 
    ]