html - Webp 和

转载 作者：行者123 更新时间：2023-12-04 12:50:36 24 4

我正面临一个问题，我似乎无法找出问题所在，我有:

<picture>
    <source type="image/webp" srcset="/images/meh_logo.webp">
    <img src="/images/meh_logo.png" type="image/png">
</picture>

在 chrome 上，它只是默认为 png 标志。

如果我将鼠标悬停在检查器中的链接上，它会显示 webp 图像。

如果我在新选项卡中打开 webp 图像链接，它会加载文件。

我的标题返回:

image/webp,image/apng,image/,/*;q=0.8

如果我改变 源源代码集 至 img srcset - 这将显示 webp 文件。

Chrome: 70.0.3538.110

在 MAMP Pro 上本地测试，不显示。

最佳答案

WEBP 是一棵树。 PNG 是一朵玫瑰。您使用了下面的代码...

<picture>
  <source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
</picture>

根据 this source你应该重复来源，像这样:

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

当我在 FF 和 Chrome 中运行这些脚本时，它们会显示一棵树，从而显示 WEBP 图像。你看到了什么？

关于html - Webp 和 <picture><source 在 chrome 上对我不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53598308/

24 4 0

• 实例分析Try {} Catch{} 作用

  今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？ 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下

• html - 列表社交媒体链接的 ARIA 作用

  我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因

• java.util.Timer SystemTime 作用？

  说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas

• php - 什么是 Doctrine hydration 作用？

  就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the

• python入门:argparse浅析 nargs='+'作用

  我就废话不多说了，大家还是直接看代码吧~ ? 1

• Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解

  Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav