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

谢谢你!


当前回答

只需添加所需的文件或url

<div style={
   {
      backgroundImage: `url(${require("./path_local")})`,      
   }
}
>

或者在css中设置base64 image

div {
  background:
    url('data:image/gif;base64,R0lGODlhZQBhAPcAACQgDxMFABsHABYJABsLA')
    no-repeat
    left center;
}

您可以使用https://www.base64-image.de/进行转换

其他回答

对我来说,有效的方法就是这样

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

这对我很有效

style={{backgroundImage: url(${require("../assets/pet4.jpeg").default})}}

更新至17.05.22 而不是:

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

do:

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

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

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

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

backgroundImage: `url(${Background})`

有时候你的SVG会被React内联,所以你需要在它周围加引号:

     backgroundImage: `url("${Background}")`

否则它是无效的CSS,浏览器开发工具将不会显示你已经设置了background-image。