我正在尝试访问一个静态图像,以便在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 src={ Background } />
运行得很好。
谢谢!
发布于 2016-08-29 06:55:45
backgroundImage属性内的大括号错误。
您可能正在使用带有图像文件加载器的webpack,因此背景应该已经是一个字符串:backgroundImage: "url(" + Background + ")"
您也可以使用如下所示的ES6字符串模板来达到同样的效果:
backgroundImage: `url(${Background})`
发布于 2018-10-13 03:55:32
设置任意图像全屏的内联样式:
style={{
backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}
发布于 2018-03-17 17:50:49
如果您使用的是ES5 -
backgroundImage: "url(" + Background + ")"
如果您使用的是ES6 -
backgroundImage: `url(${Background})`
基本上,删除不必要的花括号,同时为backgroundImage属性增加价值将会起作用。
https://stackoverflow.com/questions/39195687
复制相似问题