Question

寻找一种方法来改变jumbotron组件的背景图像

这是我尝试过的但没有运气：

class Jumbo extends Component {
  render() {
    var styles ={
      "background-image":"http://worldkings.org/Userfiles/Upload/images/Yale.jpg"
    }
    return (
      <div>
        <Jumbotron style={styles}>
            <h1>Public Art</h1>
            <br/>
            <p>
            A crowd-sourced archive of art in public spaces.
            </p>

            <Button bsStyle="primary" href="#" >Learn more</Button>

            <Button bsStyle="primary" href="#" >Submit a Piece</Button> 
            {/*link these!*/}

        </Jumbotron>
      </div>
    );
  }
}

任何指针？

Answer 1

显然，根据React doc的示例，您必须使用backgroundImage代替"background-image"内联样式：

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

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

取自：https://reactjs.org/docs/dom-elements.html

风格

style属性接受带有camelCased的JavaScript对象   属性而不是CSS字符串。这与DOM一致   样式JavaScript属性，更有效，并阻止XSS   安全漏洞。

Answer 2

找到了一个很好的解决方案 here。我知道这是旧的，但这是搜索问题时出现的第一个结果。未来的反应引导程序，享受！

<块引用>

首先，正常导入你的图片：

import bgimage from '../image_background.png'

然后您可以像这样将样式应用到您的标签：

<Jumbotron style={{ backgroundImage: `url(${bgimage})`, backgroundSize: 'cover' }}>

react-bootstrap Jumbotron背景图像

2 个答案: