javascript - 如何在媒体查询中使用 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);
        }

    }

}