时间戳

首页 > 解决方案 > webp 图像未使用 Angular 8、Chrome 版本 78 显示

html - webp 图像未使用 Angular 8、Chrome 版本 78 显示

问题描述

我无法弄清楚为什么我在我的 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 宽的元素。

我的猜测是图片元素工作正常，因为它无法读取 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 图像。

标签： htmlangulargoogle-chromewebp

解决方案

好的，我找到了导致混乱的事情：

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

在 Web 应用程序中滚动到此图像时（在加载组件时最初不可见），一切正常。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>

对于客户端第一次导航到组件时将可见的图像。

推荐阅读