#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.