使用React内联样式设置backgroundImage

Question

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

谢谢!

Answer 1

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

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

您还可以使用如下的ES6字符串模板来实现相同的效果:

backgroundImage: `url(${Background})`

Answer 2

如果您使用的是ES5 -

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

如果您使用的是ES6 -

backgroundImage: `url(${Background})`

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

Answer 3

用于设置任何全屏图像的内联样式:

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'
}}

Answer 4

您可以使用模板文字（用反引号括起来：`...`）。对于backgroundImage这样的财产：

backgroundImage: `url(${Background})`

Answer 5

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

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

**注意两组花括号.

Answer 6

对我来说，工作是这样的

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

Answer 7

这个对我有用：

  import Background from '../images/background_image.png';
    
  <div className=...
       style={{
              background: `url(${Background})`,
            }}
    >...</div>

Answer 8

对于localReactJS的文件。尝试

import Image from "../../assets/image.jpg";

<div
style={{ backgroundImage: 'url(' + Image + ')', backgroundSize: 'auto' }}
>Hello
</div>

这是ReactJS内联样式的情况，其中Image是您必须使用路径导入的本地文件。

Answer 9

将代码的第 6 行更改为

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

到

  backgroundImage: "url(" + { Background.src } + ")"

它会起作用的。