визуализация изображения рабочего стола в качестве фона для mobile react JSX

#css #reactjs #jsx #wordpress-gutenberg #gutenberg-blocks

#css #reactjs #jsx #wordpress-gutenberg #gutenberg-blocks

Вопрос:

Я создал пользовательский блок Гутенберга, используя react JSX, где я беру у пользователя два ввода изображения героя, один для рабочего стола, а другой для мобильных устройств. Все идет хорошо, поскольку пользователь загрузил оба изображения, но когда пользователь не загружает мобильное изображение, тогда отображается пустое пространство, поэтому я хочу, чтобы изображение рабочего стола отображалось, когда мобильный телефон не предоставлен. Прикрепляя ссылку на код, кто-нибудь может мне помочь, как добавить это в react JSX.

Вот мой метод сохранения

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

Ответ №1:

Просто обновите часть рендеринга мобильного изображения.

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

Это установит imgURL, если у вас нет mobileImgURL.