使用React内联样式设置backgroundImage

JavaScript

阿飞Pro

2020-03-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 } /> 效果很好。

谢谢！

第446篇《使用React内联样式设置backgroundImage》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
TonyEvaL 2020.03.10

你可以尝试我们img

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")
神无小哥 2020.03.10

您也可以使用require()函数将图像带入组件。

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

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

三千曜米亚 2020.03.10

您可以使用Template Literals（用反引号括起来的`...`）代替backgroundImage此类属性：

backgroundImage: `url(${Background})`
泡芙 2020.03.10

尝试这个：

style={{ backgroundImage: `url(require("path/image.ext"))` }}
村村路易 2020.03.10

如果您使用的是ES5-

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

如果您使用的是ES6-

backgroundImage: `url(${Background})`

从本质上讲，在为backgroundImage属性添加值的同时删除不必要的花括号将起作用。

阳光神乐 2020.03.10

backgroundImage属性内的花括号错误。

可能您正在将webpack与图像文件加载器一起使用，因此Background应该已经是一个String了： backgroundImage: "url(" + Background + ")"

您还可以使用以下ES6字符串模板来达到相同的效果：

backgroundImage: `url(${Background})`

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android