我的 style.scss 中有这个:
.myComponent {
&__pic {
// some other styles
@media (max-width: 767px),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
background-image: url({this needs to come from API});
}
}
}
如果它只是默认背景图片,我知道该怎么做,就像这样:
<div className="col-md-8">
<div className="myComponent__pic" style={{
backgroundImage: `url(${someObject.someImage})`
}} />
</div>
但是我如何在样式表之外指定 @media
样式,以便我可以为它提供来自 API 的图像 (someObject.someImage2x
)?
最佳答案
您可能希望使用 CSS 变量作为解决方法。
let imageQuery = {
--backgroundImage-2x: `url(${someObject.someImage2x})`,
--backgroundImage-1x: `url(${someObject.someImage1x})`
}
<div className="col-md-8">
<div className="myComponent__pic" style={imageQuery} />
</div>
.myComponent {
&__pic {
--backgroundImage-2x: "";
--backgroundImage-1x: "";
// some other styles
background-image: var(--backgroundImage-1x);
@media (max-width: 767px),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
background-image: var(--backgroundImage-2x);
}
}
}
关于javascript - 如何在媒体查询中使用 API 返回图像作为背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53474363/