Chrome 在生产中不显示 WEBP 图像

Posted 2023-03-28

【中文标题】Chrome 在生产中不显示 WEBP 图像

【英文标题】：Chrome doesn't show WEBP images in production

【发布时间】：2021-05-29 06:32:58

【问题描述】：

虽然在本地完美运行，但 Chrome 不会在应用部署后呈现 WEBP 图像。 既不通过图片标签，也不通过标准 img。 参考网址：https://neuralle-staging.herokuapp.com/case-study-resources

例子：

<picture>
  <source srcset="https://cdn.neuralle.com/assets/v2/case_studies/lwc-24ac69b1ab68da006ef9e1ecc8bd9025aaf646a684235811b9b2afa9efebc07e.webp" type="image/webp" class="lazyloading">
  <source srcset="https://cdn.neuralle.com/assets/v2/case_studies/lwc-0fa311dd3dd17a0092d6ad606a31b16b7184de62c7bfebe9c3181ff811a95ea8.jpg" class="lazyloading">
  <img src="https://cdn.neuralle.com/assets/v2/case_studies/lwc-0fa311dd3dd17a0092d6ad606a31b16b7184de62c7bfebe9c3181ff811a95ea8.jpg" class="lazyloaded">
</picture>

此外，Safari、Firefox 或 Chrome 移动版一切正常，我可以下载此图像并在我的操作系统中打开。

另一个奇怪的事情是，如果我直接在浏览器中打开图像，它会以文本文档的形式打开（仅当应用程序部署时——我可以像往常一样在本地打开它）：https://cdn.neuralle.com/assets/v2/case_studies/lwc-24ac69b1ab68da006ef9e1ecc8bd9025aaf646a684235811b9b2afa9efebc07e.webp

是的，它与延迟加载无关。

因此，当图像托管在远程服务器上时，似乎出现了问题。我使用的是 Ruby on Rails 6，所以可能是资产预编译，但不能肯定。

我尝试了 Chrome 88，Win 和 Mac 都有。

【参考方案1】：

原来该应用正在通过 CDN (Cloudflare) 获取资产，并且由于某种原因，Cloudflare 无法正确提供 WEBP 图像。

找到了罪魁祸首。

我还了解到有免费帐户限制，所以我暂时禁用了 CDN。