image 组件拉取图片的本质是使用wx.downloadFile
这个接口加载图片的资源,加载以后,再将加载的图像绘制出来。
图片链接可以正常访问,但 image 组件加载不出图片
1、图片格式不规范
如线上 SSL 证书有问题。或者文件描述信息例如content-type
、length
等信息不标准不规范。
2、服务器发生了 302 跳转。
302,即 HTTP 状态码,就像生活中的呼叫转移功能,我们给 A 打电话,A 通过呼叫转移,把我们的呼叫转移到 B 号码上,就相当于服务器端的 302 跳转。在服务器接收到前端 HTTP 请求的时候,前端想要加载 A 页面,但是 A 页面由于网站改版现在不存在了,取而代之的是B页面,此时服务器就可以返回 302 状态码,同时再返回一个 B 页面的地址,浏览器看到状态码和地址时,就会自动跳转到 B 页面。
涉及到页面跳转的状态码一共有两个,301 和 302 都是页面重定向的。
- 301 是请求的网页永久的转移到了新地址。
- 302 是请求的网页临时转移到了新地址。
图片短连接就是利用了服务器端的 302 跳转实现的。小程的 image 组件也是支持短连接的。这是微信团队在组件内部进行了处理,因为如果我们单独拿wx.downloadFile
这个接口去加载一个短连接的图片时,是直接返 403 错误的。
3、网络不好,加载超时。
使用 image 组件的 binderror 属性处理,监听 error 事件,重新给 src 属性赋值。
4、加载 webp 格式图片。
需要 image 组件设置 webp 属性为 true。