Question

如何从道具设置背景图像。我试过不同的变化，但不能让它工作。 css在html中显示但图像未显示。

＆＃13;

const cover =   "http://www.w3schools.com/css/trolltunga.jpg";

class App extends React.Component {
  render(){
    return(
      <div>
        <h2>Hey</h2>
        <Child image = {cover} />
      </div>
    )
  }
}

class Child extends React.Component{
  render(){
    const style = {
      backgroundImage: "url("+this.props.image+")",
      backgroundSize: "100% 100%"
    }
    return(
      <div style={style}></div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

Answer 1

问题是div是empty，这就是为什么background图片不可见的原因。把一些内容放在里面，它将是可见的，试试这个：

<div style={style}>Add background</div>

检查jsfiddle，你的代码是否正常运行。我刚才添加了以上内容：https://jsfiddle.net/0z38gozj/

设置背景图像从道具不工作

1 个答案: