изображения webp не отображаются с использованием Angular 8, Chrome версии 78

Я не могу понять, почему я не вижу изображения webp в моем приложении angular. Ниже приведен код:

<picture>
     <source type="image/webp" srcset="./assets/4T-dashboard-start.webp">
     <img class="shadowed" src="./assets/4T-dashboard-start.png" style="width: 100%; height: auto;">
</picture>

Используя инструменты разработчика, я ясно вижу, что ссылка на изображение webp действительна и действительно содержит изображение. При наведении курсора на любой элемент изображения в своем приложении я получаю странный элемент высотой 0 пикселей и шириной 21 пиксель.

Я предполагаю, что элемент изображения работает правильно, поскольку он обслуживает изображение, поскольку не может прочитать изображение webp. Вопрос в том, почему он не может прочитать изображение в Интернете?

<picture>
     <source type="image/webp" media="(min-width: 0px)" srcset="./assets/4T-dashboard-start.webp">
     <img class="shadowed" src="./assets/4T-dashboard-start.png" style="width: 100%; height: auto;">
</picture>

Я также попытался поиграть с медиа-запросом и посмотреть, поможет ли это. Но безрезультатно. Я сделал два тестовых изображения webp через командную строку. Я могу открыть их в их каталоге и нормально просматривать их в Chrome. Что мне нужно сделать, чтобы это заработало?

Если я создам это на тестовом сервере и запустил журнал аудита с помощью Chrome на веб-сайте, я могу подтвердить, что Chrome не имеет текущего способа узнать, что существуют два изображения webp.


angular google-chrome html webp
person Willie    schedule 03.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я нашел то, что вызывало путаницу:

Вскоре после переключения некоторых изображений на webp я начал ленивую загрузку всех изображений в приложении. Один из атрибутов отложенной загрузки - [attr.lazyLoad]="'imageURL'" загружался после загрузки изображения, например

<picture>
   <source type="image/webp" [attr.lazyLoad]="'./assets/4T-dashboard-popover.webp'">
   <img [lazyLoad]="'./assets/4T-dashboard-popover.png'" style="width: 100%; height: auto;"/>
</picture>

При прокрутке к этому изображению в веб-приложении (изначально его не было видно при загрузке компонента) все работало нормально. Изображение webp загрузится

Но если изображение соответствует критериям lazyLoad (т.е.элемент контейнера был виден) при загрузке страницы, приложение будет лениво загружать изображение png, затем загружает изображение webp.

Итак, чтобы обойти это (что я изначально думал, что это ошибка webp), я в конечном итоге использовал srcset в исходном теге для принудительной загрузки webp, как показано ниже:

<picture>
   <source type="image/webp" [attr.lazyLoad]="'./assets/4T-dashboard-popover.webp'" srcset="./assets/4T-dashboard-popover.webp">
   <img [lazyLoad]="'./assets/4T-dashboard-popover.png'" style="width: 100%; height: auto;"/>
</picture>

Для изображений, которые должны были быть видны клиенту при первом переходе к компоненту.

person Willie    schedule 14.04.2020