如何在Safari中通过JavaScript将webp图像加载到“new image()”中
我刚切换到如何在Safari中通过JavaScript将webp图像加载到“new image()”中,javascript,safari,mobile-safari,Javascript,Safari,Mobile Safari,我刚切换到webp图像,发现它们不起作用。我正在使用来处理加载这些图像。这就是问题所在。我希望能够提交一个拉请求来解决这个问题。。。如果可能的话 下面的示例演示了两种不同图像格式的成功与失败: 这是留给后代的密码 const loadImageAsync = (item) => { let image = new Image() console.log(item) image.src = item image.onload = function () { cons
webp
图像,发现它们不起作用。我正在使用来处理加载这些图像。这就是问题所在。我希望能够提交一个拉请求来解决这个问题。。。如果可能的话
下面的示例演示了两种不同图像格式的成功与失败:
这是留给后代的密码
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为相应请求发送的标题时,我想我可能有一个线索:
游猎
铬
猜测
这可能与chrome中的secfetchmode
有关,还是与Safari中的Accept
标题有关
我现在想不出还有什么别的了。有什么想法吗?我觉得很傻:iOS或Safari不支持Webp。这就是行不通。
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
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