小程序 image 组件常见问题

image 组件拉取图片的本质是使用wx.downloadFile这个接口加载图片的资源,加载以后,再将加载的图像绘制出来。

图片链接可以正常访问,但 image 组件加载不出图片

1、图片格式不规范

如线上 SSL 证书有问题。或者文件描述信息例如content-typelength等信息不标准不规范。

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 属性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容