[Webp图像未使用Angular 8，Chrome版本78显示

Question

我无法弄清楚为什么在我的角度应用程序中看不到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高乘21px宽的元素。

我的猜测是，由于无法读取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错误）我最终在source标记中使用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>

对于要在客户端第一次导航到该组件的图像。