我试图访问一个静态图像在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} />工作得很好。
谢谢你！
当前回答
更新至17.05.22 而不是:
backgroundImage: "url(" + { Background } + ")"
do:
backgroundImage: "url(" + Background + ")"
其他回答
试试这个:
style={{ backgroundImage: `url(require("path/image.ext"))` }}
试试这个，对我来说很管用
backgroundImage: `url("${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/进行转换
将代码的第6行改为
backgroundImage: "url(" + { Background} + ")"
to
backgroundImage: "url(" + { Background.src } + ")"
它会起作用的。
对于ES6，请使用
backgroundImage: `url("${Background}")
