添加带有背景图像的内联样式

Question

我正在尝试为这样的反应组件添加img背景

  var imageStyle = {
  color: '#fff',
  backgroundImage: 'url(' + { this.props.top_room.avatar } + ')',
  background: 'bottom right 15% no-repeat #46B6AC;'
};

var TopRoom = React.createClass({
  render: function() {
    return (
      <div className="mdl-card mdl-shadow--2dp demo-card-square">
        <div className="mdl-card__title mdl-card--expand" style={imageStyle}>

但它不起作用。如何添加此图像？

Answer 1

在这种情况下，您不必使用花括号。

这样的事情应该有效

var imageStyle = {
  color: '#fff',
  backgroundImage: 'url(' + this.props.top_room.avatar + ')',
  background: 'bottom right 15% no-repeat #46B6AC;'
};