Javascript 如何在媒体查询中使用API返回的图像作为背景图像？

这是我的风格。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

）

让imageQuery={
--backgroundImage-2x:`url（${someObject.someImage2x}）`，
--backgroundImage-1x:`url（${someObject.someImage1x}）`
}

.myComponent{
&__图片{
--背景图片-2x:；
--背景图像-1x:；
//其他一些款式
背景图像：var（--backgroundImage-1x）；
@介质（最大宽度：767px），
（-webkit最小设备像素比：2），
（最小分辨率：192dpi）{
背景图像：var（--backgroundImage-2x）；
}
}
}

您可能希望使用CSS变量作为解决方法

让imageQuery={
--backgroundImage-2x:`url（${someObject.someImage2x}）`，
--backgroundImage-1x:`url（${someObject.someImage1x}）`
}

.myComponent{
&__图片{
--背景图片-2x:；
--背景图像-1x:；
//其他一些款式
背景图像：var（--backgroundImage-1x）；
@介质（最大宽度：767px），
（-webkit最小设备像素比：2），
（最小分辨率：192dpi）{
背景图像：var（--backgroundImage-2x）；
}
}
}