小程序 image 组件常见问题

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。

相关文章：

小程序 image 组件 webp 属性