使用 Angular 8，Chrome 版本 78 不显示 webp 图像

Question

我不明白为什么在我的 angular 应用程序中看不到 webp 图像。下面是代码：

<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 图像的引用是有效的，并且实际上确实包含图像。当我将鼠标悬停在我的应用程序中的任何图片元素上时，我得到一个奇怪的 0px 高 x 21px 宽元素。

我的猜测是 picture 元素工作正常，因为它无法读取 webp 图像，所以它正在提供图像。问题是，为什么无法读取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 图像。

Answer 1

好的，我找到了造成混乱的原因：

将一些图像切换到 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>

对于客户第一次导航到组件时会看到的图像。

使用 Angular 8，Chrome 版本 78 不显示 webp 图像

webp images not displaying using Angular 8, Chrome version 78

html

google-chrome

webp

angular