使用React内联样式设置backgroundImage

问题描述

backgroundImage属性内的花括号错误

可能您正在将webpack与图像文件加载器一起使用,因此Background应该已经是一个String了: backgroundImage: "url(" + Background + ")"

您还可以使用以下ES6字符串模板来达到相同的效果

backgroundImage: `url(${Background})`

解决方法

我正在尝试访问静态图像以backgroundImage在React 的内联属性中使用。不幸的是,我已经干了如何做到这一点。

通常,我认为您只是这样做如下:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",height: "400px",backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

这适用于<img>标签。有人可以解释两者之间的区别吗?

例:

<img src={ Background } /> 效果很好。

谢谢!

猜你在找的技术问答相关文章

如何检查配对的蓝牙设备是打印机还是扫描仪(Android)
是否允许实体正文进行HTTP DELETE请求?
如何将ZipInputStream转换为InputStream?
java.util.logging Java 8中的变量
PowerMockito.doReturn返回null
Java中的RESTful调用
Swing / Java:如何正确使用getText和setText字符串
特殊字符和重音字符
Android Studio中的ndk.dir错误
错误“找不到主类”