如何在 Safari 中通过 JavaScript 将 webp 图像加载到

Question

我刚刚切换到webp图像并注意到它们不起作用。我正在使用延迟加载插件来处理加载这些图像。这就是问题所在。如果可能的话，我希望能够提交拉取请求来解决这个问题。这是一个示例，演示了两种不同图像格式的成功和失败：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 和 Mobile Chrome 中，webp失败并显示以下效果的错误：{"isTrusted":true}。该错误不是很有帮助。但是我想当我查看从 Chrome 和 Safari 发送的相应请求的标头时，我可能会有一些线索：苹果浏览器RequestGET /road-trip-blog/1c9fe9f0-4e9e-3604-9b77-e35d7ecfc40f-w2100.webp HTTP/1.1Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5Pragma: no-cacheReferer: https://cdpn.io/Cache-Control: no-cacheHost: s3.amazonaws.comUser-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.15Accept-Language: en-usAccept-Encoding: br, gzip, deflateConnection: keep-alive铬合金Provisional headers are shownReferer: https://cdpn.io/Sec-Fetch-Mode: no-corsUser-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猜想可能与Sec-Fetch-Modechrome 或AcceptSafari 中的标题有关吗？我现在想不出别的了。有任何想法吗？

Answer 1

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