微信小程序图片属性详解，从基础到进阶一网打尽

做小程序开发，绕不开image组件。你随便打开一个小程序，首页十个元素里至少有七个是图片。但就是这么个天天见面的老熟人，很多开发者对它的了解还停留在src和mode上。我在帮朋友排查一个图片显示异常的问题时，发现他连binderror都没用过，页面里图片加载失败就干瞪眼。今天咱们就把这个组件的底裤扒干净，从最基础的属性到那些能让你少写几百行代码的进阶玩法，一次性说透。

先看最基础的src和mode。src没啥好说的，就是图片地址，但有个坑得提醒你——本地图片路径别用相对路径，小程序里必须用绝对路径，也就是从根目录写起，比如/image/logo.png。很多人刚上手时在这卡半天，页面就是出不来图。mode是控制图片如何适应容器尺寸的，默认是scaleToFill，简单粗暴地拉伸填满，比例全给你整变形了。你做个头像或者商品图，用这个模式，客户看到图歪了肯定找你麻烦。所以mode一定要搞明白，aspectFit是保持比例完整显示，适合那种需要看全貌的图，比如二维码、长截图；aspectFill则是保持比例但会裁剪，适合做轮播图、封面图，把中间那块最精彩的部分露出来。

然后是widthFix，这个属性堪称懒人神器。你设了宽度，高度会自动按原图比例计算，再也不用手动算高度了。但用widthFix有个隐藏问题——如果图片在列表里，滚动时高度会跳动，因为图片是加载完成后才撑开高度的。解决办法也简单，给图片外面套个固定高度的容器，或者用CSS的aspect-ratio属性预先占位。另外，lazy-load属性也值得单独拎出来说，它能让图片在进入视口时才加载，列表里有几十张图的时候，页面加载速度能快一大截。但注意，lazy-load对background-image没用，只对image组件生效。

再往下看，webp属性很多人忽略了。小程序默认用webp格式能省不少流量，特别是做电商的，商品图动辄几百KB，转成webp能压到原来的三分之一。你只要在image标签上加个webp="true"，图片就会尝试用webp格式加载。但得注意兼容性，老版本的微信可能不支持，所以生产环境最好在后端做多格式适配，前端这个属性当作锦上添花就行。show-menu-by-longpress这个属性挺有意思，用户长按图片会弹出系统菜单，可以转发、收藏、保存图片。如果你是做内容类小程序，这个功能能提升用户分享意愿，但如果你是做私密内容，比如付费课程截图，那千万别开这个，用户长按就能把图存走了。

接下来聊几个不常用但关键时刻能救命的属性。binderror和bindload，这俩是事件属性，分别监听图片加载失败和加载成功。我见过太多人图片挂了就挂个裂图标，用户体验极差。正确的做法是，图片加载失败时，用binderror替换成一张默认占位图，或者弹个提示。bindload还能拿到图片的原始宽高，这在做图片懒加载或者自适应布局时特别有用。举个例子，你做一个瀑布流布局，图片高度不固定，你可以监听bindload事件，获取每张图片的原始尺寸，然后动态设置容器高度，这样就不会出现图片加载完突然跳动的情况了。

还有个属性叫picture-in-picture-mode，这个比较新，支持画中画模式，适合做视频封面或者直播间的商品图。但说实话，这功能现在用的人不多，而且只支持部分安卓机型，iOS基本没戏。你要是做工具类小程序，可以无视它，但如果做视频类应用，建议提前了解一下，说不定哪天苹果就支持了。另外，image还有一个隐藏技能——支持base64图片。有些场景下，比如用户上传头像后立即回显，你不想再发一次请求，就可以直接把base64塞到src里。不过base64图片体积大，会拖慢渲染速度，所以只适合小图临时用，别整张高清图都塞进去。

进阶玩法里，image的裁剪和缩放也可以用CSS配合来实现。比如你想做一个圆角头像，直接用border-radius就行，但要注意，小程序里图片的圆角如果配合aspectFill，边缘会被裁剪掉，这时候你把overflow:hidden加在外层容器上，问题就解决了。还有，图片的懒加载和预加载可以配合IntersectionObserver来实现更精细的控制，但小程序自带的lazy-load已经够用，除非你的场景特别复杂，比如页面里有多个图片列表需要按顺序加载，那才需要手动写逻辑。

得说说性能优化。小程序包的体积限制是2MB，图片是最占空间的。所以图片一定要走CDN，别存本地。而且CDN地址最好带尺寸参数，比如七牛云的imageView2接口，可以实时裁剪图片尺寸，你只需要在src里拼参数，就能拿到不同尺寸的图。列表页用200px宽的图，详情页用800px宽的图，这样加载速度能提升好几倍。另外，图片格式上，能上webp就上webp，能上avif更好，但avif兼容性更差，所以目前主流还是webp和JPEG XR。

写到这里，image组件的属性基本都过了一遍。你会发现，这玩意儿虽然简单，但用好了能省下不少功夫。下次你再遇到图片显示异常，别急着发朋友圈求助，先检查mode对不对，再看lazy-load有没有误开，看看src路径是不是写错了。把这几个基础点吃透，再玩转那些进阶属性，你的小程序图片体验绝对能甩开大部分同行。