如何在 Safari 中通过 JavaScript 将 webp 图像加载到 `new Image()`

Question

我刚切换到 webp 图片，发现它们不起作用。我正在使用 a lazy loading plugin 来处理加载这些图像。这就是问题所在。我希望能够提交一个拉取请求来解决这个问题......如果可能的话。

这是一个演示两种不同图像格式成功和失败的示例：

https://codepen.io/corylogan/pen/OJJMERo?editors=1010

这是后代的代码

const loadImageAsync = (item) => {
  let image = new Image()
  console.log(item)
  image.src = item
  image.onload = function () {
    console.log('successful onload')
  }

  image.onerror = function (e) {
    console.log('got an error')
    console.log(e)
  }
}

loadImageAsync('https://upload.wikimedia.org/wikipedia/commons/a/a5/Red_Kitten_01.jpg')
loadImageAsync('https://s3.amazonaws.com/road-trip-blog/1c9fe9f0-4e9e-3604-9b77-e35d7ecfc40f-w2100.webp')

在chrome中，两张图片都会报告成功。在 iOS 上的 Safari 和移动 Chrome 中，webp 失败并出现错误，结果为：{"isTrusted":true}.

这个错误不是很有帮助。但是我想当我查看从 Chrome 和 Safari 发送的 headers 以获取相应请求时，我可能会有线索：

野生动物园

Request
GET /road-trip-blog/1c9fe9f0-4e9e-3604-9b77-e35d7ecfc40f-w2100.webp HTTP/1.1
Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Pragma: no-cache
Referer: https://cdpn.io/
Cache-Control: no-cache
Host: s3.amazonaws.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.2 Safari/605.1.15
Accept-Language: en-us
Accept-Encoding: br, gzip, deflate
Connection: keep-alive

Chrome

Provisional headers are shown
Referer: https://cdpn.io/
Sec-Fetch-Mode: no-cors
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

猜测

可能与 chrome 中的 Sec-Fetch-Mode 或 Safari 中的 Accept header 有关？

我现在想不出其他的了。有什么想法吗？

Answer 1

我觉得很傻：iOS 或 Safari 不支持 Webp。它只是行不通。 https://caniuse.com/#feat=webp

如何在 Safari 中通过 JavaScript 将 webp 图像加载到 `new Image()`

How to load a webp image into a `new Image()` via JavaScript in Safari

javascript

safari

mobile-safari

野生动物园

Chrome

猜测