reactjs - 动态背景图片：元素后

Question

我是新手，我一直在尝试实现我目前定义的视差效果 -

<section className="section parallax backgroundImageProp"></section>

我正在使用 css 提供背景图片 -

.backgroundImageProp::after{
background-image: url('https://republic-prod.azureedge.net/republic-prod/stories/promolarge/xxhdpi/15207762165aa53418177b5.jpeg');
background-repeat: no-repeat;

}

目前图像是硬编码的我希望它被动态渲染，但经过多次尝试后我无法这样做，我使用下面的样式来添加 css -

var backgroundImageAfter = {
  after:{backgroundImage:'url(' + image_url + ')'},
};

<section className="section parallax" style={backgroundImageAfter}>
</section>

但这也无济于事。我在这里遗漏了一些东西。请帮忙。

Answer 1

您必须添加一个divwith style={backgroundImageAfter}aftersection元素并从样式对象中删除 after 。

var backgroundImageAfter = {
  backgroundImage:'url(' + image_url + '),
};

<section className="section parallax">
</section>
<div style={backgroundImageAfter}></div>