react 中添加背景图?

Question

如何在react中给div添加背景图,下面是我的代码：

const bg = {
  height: '100%',
  color: 'red',
  //background: url("../../source/1.jpg"),
  background: require("../../source/1.jpg"),
};

class Login extends React.Component {

  constructor() {
    super();
  }

  render() {
    return(
      <div style={ bg }>
          dsfsadfadff
      </div>
    )
  }
}
用url浏览器报错，没有这个方法
用require没报错也没效果
路径肯定是对的，因为我用img引用的时候是可以的

Answer 1

@AK47_Man [AK47_Man] 的少了括号。。。加上括号再试试，应该可以用

const bg = {
  background: `url(${require("../../source/1.jpg")})`,
};

Answer 2

用的是css还是less还是sass

然后还得看webpack的配置相了

Answer 3

https://facebook.github.io/re...

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Answer 4

const bg = {
  height: '100%',
  color: 'red',
  //background: url("../../source/1.jpg"),
  //background: require("../../source/1.jpg"),
  background: `url${require("../../source/1.jpg")}`,
};

class Login extends React.Component {

  constructor() {
    super();
  }

  render() {
    return(
      <div style={ bg }>
          dsfsadfadff
      </div>
    )
  }
}

Answer 5

复合属性写具体，并驼峰式写法