Search code examples
cssreactjsjsxwordpress-gutenberggutenberg-blocks

render desktop image as background for mobile react JSX

I have build an custom Gutenberg block using react JSX, where I am taking two hero image inputs from user, one is for Desktop and other is for Mobile. Everything is going well as far as user uploaded both the images, but when user does not upload mobile image then it shows blank space, So, I want desktop image to render when mobile is not provided. Attaching the code reference, can anybody help me how to add that in react JSX.

Here is my save method

                  <img className="header-img header-img-d" src={ imgURL } />
                  <img className="header-img header-img-m" src={ mobileImgURL }/>
Solution

  • Just update the rendering part of mobile image.

    <img className="header-img header-img-m" src={ mobileImgURL ? mobileImgURL : imgURL  }/>

    This will set imgURL if you do not have mobileImgURL.