English 我正在尝试访问静态图像以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 } /> 效果很好。
谢谢！
您也可以使用require()函数将图像带入组件。
<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>
请注意两组大括号。第一组用于进入反应模式，第二组用于表示对象
您可以使用Template Literals（用反引号括起来的`...`）代替backgroundImage此类属性：
backgroundImage: `url(${Background})`
尝试这个：
style={{ backgroundImage: `url(require("path/image.ext"))` }}
如果您使用的是ES5-
backgroundImage: "url(" + Background + ")"
如果您使用的是ES6-
backgroundImage: `url(${Background})`
从本质上讲，在为backgroundImage属性添加值的同时删除不必要的花括号将起作用。
backgroundImage属性内的花括号错误。
可能您正在将webpack与图像文件加载器一起使用，因此Background应该已经是一个String了：
backgroundImage: "url(" + Background + ")"
您还可以使用以下ES6字符串模板来达到相同的效果：
backgroundImage: `url(${Background})`
你可以尝试我们img