How to use API returned image for background image in media query?

Question

I have this in my 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});
        }

    }

}

I know how to do if it's just the default background image, like so:

<div className="col-md-8">
    <div className="myComponent__pic" style={{
        backgroundImage: `url(${someObject.someImage})`
    }} />
</div>

But how do I specify the @media style outside the stylesheet so that I can give it the image ( someObject.someImage2x ) coming from the API?

Answer 1

You might want to use CSS variables as a workaround.

 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); } } }