Изображение, запрошенное через Ajax в iOS broswer, не отображается, но загружается и в DOM

Question

Обновление

• Размер изображения не должен быть проблемой, так как остальная часть фотографии на моем сайте все еще может загружаться без проблем.
• Я обнаружил, что эта проблема существует только при просмотре в iOS. Он отлично работает в Android.

Я создал плагин с бесконечной прокруткой для загрузки большего количества постов через REST API в Wordpress. Плагин отлично работает в настольном браузере, но они не могут загрузить изображение в сообщении при посещении в мобильном браузере (протестировано с Chrome и Safari с моим iphoneX).

Я отладил это с помощью удаленной отладки, и это то, что я нашел в данный момент.

• Тег html для изображения передается в ответе XHR.
• Элемент этого изображения находится в DOM.
• Нет CSS правила, такие как отображение: никто не скрывает изображение
• Изображение получено с кодом состояния 200

Что я пропустил?

Снимок экрана для Safari Debugger с ответом изображения: https://monosnap.com/file/uj4bjX7xGh0YDJR5vO00ALMkDrEPRM

Мой веб-сайт: Survivisthk.com (Прокрутите страницу вниз, а затем бесконечный свиток начнет работать и получать те сообщения, которые у меня проблемы с загрузкой изображений)

Answer 1

Нашел ответ для себя прямо сейчас. Высота этих изображений была изменена на 0 пикселей при загрузке. Исправлено с помощью следующего кода:

const iOSResize = () => {
    console.log('iOSResize running');
    let img = document.getElementsByTagName('img');
    for( let i = 0; i < img.length; i++){
        img[i].addEventListener('load', function () {
            let naturalH = img[i].naturalHeight;
            let naturalW = img[i].naturalWidth;
            let newH = img[i].width / (naturalW / naturalH);
            console.log(newH);
            img[i].style.height = newH + 'px';
            console.log(img[i].style.height);
        });
    }
};

Ссылка: AJAX загруженные изображения не отображаются должным образом в Safari