Chrome 不显示生产中的 WEBP 图像

Question

虽然在本地完美运行，但 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

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

因此，当图像托管在远程服务器上时，似乎出了点问题。我在 Rails 6 上使用 Ruby，因此可能与资产预编译有关，但不能确定。

我试过 Chrome 88，Win 和 Mac。

Answer 1

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

找到罪魁祸首。

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

Chrome 不显示生产中的 WEBP 图像

Chrome doesn't show WEBP images in production

html

ruby-on-rails

google-chrome

webp