wx.createSelectorQuery()
.in(this)
.select('#webgl')
.node()
.exec((res) => {
const canvas = res[0].node
const img = canvas.createImage()
img.onload = function() {
console.log('图片1加载成功')
}
img.onerror = function(e) {
console.log('图片1加载失败', e)
}
img.src = 'https://cdn.haibao.uma.com/test/preview/8/20220531/4302bf21c2faa11cd6b15486a48c7ffd.png'
const img2 = canvas.createImage()
img2.onload = function() {
console.log('图片2加载成功')
}
img2.onerror = function(e) {
console.log('图片2加载失败', e)
}
img2.src = 'https://cdn.haibao.uma.com/test/preview/8/20220531/e9a793f3a3a8171dca185b726a60b75b.png'
})
该图片url返回的CORS禁止了外部网页加载,可以排查一下该设置,以及 referer 相关配置。
https://developers.weixin.qq.com/s/NTtuxGmx7Vzc
这个新分享的代码片段里有两个图片,都是同一个CDN下,如果是response header有问题,应该是两张都加载失败。但是目前看来是一张成功一张失败
目前观察到的现象是:
1、相同的一张图片 https://cdn.haibao.uma.com/test/preview/8/20220531/4302bf21c2faa11cd6b15486a48c7ffd.png , 2d的canvas可以createImage成功,换成webgl的就不可以
2、开发工具可以加载成功,真机上不可以(包括ios和android真机)
3、jpeg格式可以, png不可以
4、png分辨率高的不可以,如果降低分辨率就可以
下面是相同的CDN的两张图片,第一张大图不可以,第二张图小一点可以
1、 https://cdn.haibao.uma.com/test/preview/8/20220531/4302bf21c2faa11cd6b15486a48c7ffd.png
2、 https://cdn.haibao.uma.com/test/preview/8/20220531/e9a793f3a3a8171dca185b726a60b75b.png
相同分辨率的jpeg能够加载成功吗?能否给个图片链接