首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用React内联样式设置backgroundImage

使用React内联样式设置backgroundImage
EN

Stack Overflow用户
提问于 2016-08-29 04:54:16
回答 15查看 625.7K关注 0票数 418

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

一般来说,我认为你只是做了以下几点:

代码语言:javascript
复制
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 } />运行得很好。

谢谢!

EN

回答 15

Stack Overflow用户

回答已采纳

发布于 2016-08-29 06:55:45

backgroundImage属性内的大括号错误。

您可能正在使用带有图像文件加载器的webpack,因此背景应该已经是一个字符串:backgroundImage: "url(" + Background + ")"

您也可以使用如下所示的ES6字符串模板来达到同样的效果:

代码语言:javascript
复制
backgroundImage: `url(${Background})`
票数 672
EN

Stack Overflow用户

发布于 2018-10-13 03:55:32

设置任意图像全屏的内联样式:

代码语言:javascript
复制
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'
}}
票数 76
EN

Stack Overflow用户

发布于 2018-03-17 17:50:49

如果您使用的是ES5 -

代码语言:javascript
复制
backgroundImage: "url(" + Background + ")"

如果您使用的是ES6 -

代码语言:javascript
复制
backgroundImage: `url(${Background})`

基本上,删除不必要的花括号,同时为backgroundImage属性增加价值将会起作用。

票数 58
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39195687

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档