使用 React 内联样式设置 backgroundImage

IT技术 javascript reactjs
2021-01-31 11:31:10

我正在尝试访问一个静态图像以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 } /> 工作得很好。

谢谢！

6个回答

backgroundImage 属性中的花括号是错误的。

可能你正在使用 webpack 和图像文件加载器，所以 Background 应该已经是一个字符串： backgroundImage: "url(" + Background + ")"

你也可以使用如下的 ES6 字符串模板来达到同样的效果：

backgroundImage: `url(${Background})`
完整语法应如下所示： style={{backgroundImage: "url(" + Background + ")"}}
2021-03-13 11:31:10
只是为了展开@mike 的评论，你需要双花括号，因为一个是让 React 进入的是 JS 模式，一个是表示新对象。
2021-03-19 11:31:10
我应该将其添加到我的问题中。我确实设置了宽度和高度（分别为 100% / 400px）。出现的问题是由于我相信 react 如何处理静态图像。
2021-04-04 11:31:10
是否应该按照w3.org/TR/CSS2/syndata.html#value-def-uri在连接之前转义 Background 变量中的 '(", ')' 和空白字符？
2021-04-05 11:31:10
在从'./background.jpg'提供此导入背景后，我收到错误'Section' is defined but never used'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: url(${Background})}; class Section extends Component { render() { return ( <section style={ sectionStyle }> </section> ); } }
2021-04-08 11:31:10

内联样式设置任何图像全屏：

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'
}}
非常感谢，这就是我要找的
2021-03-13 11:31:10
从'../images/background_image.png'导入背景；其次是这里的答案确实解决了我的问题，一起是现在最好的答案。
2021-03-16 11:31:10

如果您使用的是 ES5 -

backgroundImage: "url(" + Background + ")"

如果您使用的是 ES6 -

backgroundImage: `url(${Background})`

基本上删除不必要的花括号，同时将值添加到 backgroundImage 属性工作将起作用。

对于 ES6 中的我来说，它是backgroundImage: `url("${Background}")`，因为您的 ES6 示例对我不起作用。
2021-03-22 11:31:10
你好 Bharad，如果你想添加多个背景图片，你会怎么做。说两张图片你会怎么做？谢谢
2021-04-01 11:31:10
@S .. 谢谢，这对我有帮助。我卡住了。
2021-04-08 11:31:10

您还可以使用该require()功能将图像带入组件中。

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

注意两组大括号。第一组用于进入react模式，第二组用于表示对象

好的，我明白了，当使用基于 Web 的 URL 时。我应该写url(https://images.com/myimage.png)
2021-03-23 11:31:10
如果图像路径是 Web URL 而不是本地路径怎么办？就像是https://images.com/myimage.png
2021-04-04 11:31:10

这个对我有用：

  import Background from '../images/background_image.png';
    
  <div className=...
       style={{
              background: `url(${Background})`,
            }}
    >...</div>
其它你可能感兴趣的问题
上一篇如何取消选中单选按钮？ 下一篇在 Redux 应用程序中写入 localStorage 的位置？