更新时间:2022-12-20 15:46:52贡献者收藏我的文档设置返回文档●支持 jpg、png、svg、webp(ios 不支持动图)、gif 等格式。●使用 webview 嵌套 h5 时,若遇到图片资源不显示问题,可参考 配置 h5 白名单 获取 h5 页面中所有的域名地址(含图片静态资源的地址),全部加入域名白名单中。小程序image图片不显示排查参考。 如何查看图片大小小程序提供了获取图片信息api:my.getimageinfo。 二维码的组件目前没有提供专门的显示二维码组件。如果二维码是服务器返回的二维码加密的字符串,可以在服务器直接生成 base64 图片数据或者生成图片做成网络链接传到小程序前端页面使用 image 组件展示。 image设置显示默认图片image 组件可以通过设置 default-source 属性来实现设置显示默认图片,若设置默认图片地址,会先显示默认图片,等 src 对应的图片加载成功后,再渲染对应的图片。default-source 支持传入网络图片地址和本地图片路径。 小程序是否支持gif、svg、webp、base64图片●gif:小程序 image 组件支持 gif 格式图片。●svg:○image 支持 svg 格式的图片。○小程序不支持 svg 标签。○tabbar icon 不支持 svg 格式图片。●webp:○小程序支持 webp 格式图片,如果 webp 格式图片显示不出来,可以咨询对应提供图片服务的服务端。○android 支持 webp 格式动图,ios 本身就不支持 webp 格式动图。●base64:image 支持把 base64 图片数据复制到 image 的 src 中展示。 小程序相对路径引入图片小程序包内相关资源图片需要放在 image 文件夹下面,否则不会将相关图片打包进小程序包导致小程序运行时引入相对路径的图片失败。建议将图片存到网络服务器上,通过 url 地址访问图片。 实现图片压缩上传图片压缩可以用 my.compressimage 接口去压缩。支持基础库 1.4.0 及以上版本。示例代码:小程序中显示arraybuffer数据流的图片需要先将 arraybufer 数据转成 base64 字符串,然后把 base64 字符串放在 image 中的 src 中实现显示。 图片如何转成base64如果是手机本地图片可以通过 my.chooseimage 选择图片获取临时路径,再传入 my.uploadfile 上传到服务端,服务端拿到文件流根据自身开发语言将图片转出 base64,最后返回给小程序端。如果是网络路径图片,则直接传入 my.uploadfile 发给服务端转成 base64。代码实现参考 。 图片高度固定宽度自适应设置 image 组件的固定高度后,将 image 组件的图片模式 mode 参数设置为缩放模式的 aspectfit 模式。保持纵横比缩放,使图片的长边能完全显示出来,可以完整地将图片显示出来。 小程序中如何放大预览图片在小程序中需将图片放大查看,需通过图片的 my.previewimage 接口实现预览放大。 如何使文字与image同时加载显示在 image 组件的 onload 方法中触发响应事件后,再加载文字或再控制文字显示,实现同时加载显示的效果。 image组件里设置animation动画无效果image 组件没有 animation 属性,不能实现动画效果;建议在外嵌套一层 view,设置 view 的动画效果即可。 image的onload加载完毕事件已执行但是图片不显示检查是否存在空格,括号等特殊符号,如有则需要把符号做 urlencode 处理。