我正在尝试访问静态图像以backgroundImage在React 的内联属性中使用。不幸的是,我已经干了如何做到这一点。
backgroundImage
通常,我认为您只是这样做如下:
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>
例:
<img src={ Background } /> 效果很好。
<img src={ Background } />
谢谢!
backgroundImage属性内的花括号错误。
可能您正在将webpack与图像文件加载器一起使用,因此Background应该已经是一个String了: backgroundImage: "url(" + Background + ")"
backgroundImage: "url(" + Background + ")"
您还可以使用以下ES6字符串模板来达到相同的效果:
backgroundImage: `url(${Background})`