javascript - react 中添加背景图?

Question

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

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

Answer 1

用的是css还是less还是sass

然后还得看webpack的配置相了

Answer 2

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

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

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

Answer 3

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(
      <p style={ bg }>
          dsfsadfadff
      </p>
    )
  }
}

Answer 4

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

Answer 5

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

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