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

Question

我的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 ）？

Answer 1

您可能要使用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); } } }