一、image组件简介image组件是小程序中用来显示图片的组件功能非常强大。它支持多种图片显示模式mode属性可以适应不同的布局需求。与HTML中的img标签不同小程序的image组件有默认宽度300px、默认高度225px并且支持13种不同的显示模式。二、image组件的常用属性src图片资源地址mode图片裁剪、缩放的模式默认值为scaleToFilllazy-load图片懒加载在即将进入一定范围上下三屏时才开始加载show-menu-by-longpress长按图片是否显示菜单bindload当图片载入完毕时触发binderror当错误发生时触发三、13种显示模式详解image组件的mode属性有13种取值分为两大类3.1 缩放类4种scaleToFill不保持纵横比缩放使图片完全拉伸填满image元素aspectFit保持纵横比缩放使图片的长边能完全显示出来完整显示图片aspectFill保持纵横比缩放只保证图片的短边能完全显示出来填满容器长边裁剪widthFix宽度不变高度自动变化保持原图宽高比不变3.2 裁剪类9种以下模式都不缩放图片只显示图片的某个区域top显示顶部区域bottom显示底部区域center显示中间区域left显示左边区域right显示右边区域top left显示左上角区域top right显示右上角区域bottom left显示左下角区域bottom right显示右下角区域四、实战项目下面做一个完整的image组件演示展示全部13种显示模式的效果对比。并在每个模式的文字说明上方增加编号方便对照查看。4.1 index.wxmlnavigation-bartitleimage组件back{{false}}colorblackbackground#F8F8F8/navigation-barscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitleimage组件显示模式/viewviewclassmode-itemwx:for{{modes}}wx:keymodeviewclassmode-num{{index 1}}/viewimageclassmode-imagesrc{{imgSrc}}mode{{item.mode}}/imageviewclassmode-text{{item.mode}}{{item.desc}}/view/view/view/scroll-view4.2 index.wxsspage{height:100%;}.scrollarea{height:calc(100vh - 100rpx);}.mode-item{position:relative;margin-bottom:30rpx;padding:20rpx;background-color:#f9f9f9;border-radius:10rpx;}.mode-num{position:absolute;top:20rpx;left:20rpx;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background-color:#007aff;color:#fff;font-size:24rpx;border-radius:50%;z-index:1;}.mode-image{width:100%;height:300rpx;background-color:#eee;border-radius:10rpx;}.mode-text{margin-top:15rpx;font-size:26rpx;color:#666;line-height:1.6;}4.3 index.jsPage({data:{imgSrc:/images/demo.jpg,modes:[{mode:scaleToFill,desc:不保持纵横比缩放图片使图片的宽高完全拉伸至填满image元素},{mode:aspectFit,desc:保持纵横比缩放图片使图片的长边能完全显示出来},{mode:aspectFill,desc:保持纵横比缩放图片只保证图片的短边能完全显示出来},{mode:widthFix,desc:宽度不变高度自动变化保持原图宽高比不变},{mode:top,desc:不缩放图片只显示图片的顶部区域},{mode:bottom,desc:不缩放图片只显示图片的底部区域},{mode:center,desc:不缩放图片只显示图片的中间区域},{mode:left,desc:不缩放图片只显示图片的左边区域},{mode:right,desc:不缩放图片只显示图片的右边区域},{mode:top left,desc:不缩放图片只显示图片的左上边区域},{mode:top right,desc:不缩放图片只显示图片的右上边区域},{mode:bottom left,desc:不缩放图片只显示图片的左下边区域},{mode:bottom right,desc:不缩放图片只显示图片的右下边区域}]}})五、代码说明5.1 数据驱动使用wx:for循环渲染13种显示模式每个模式的mode值和说明文字都放在modes数组中统一管理。这样增加或修改显示模式时只需要改数据不用动结构代码。5.2 编号显示每个显示模式的左上角都有一个圆形的蓝色编号从1到13。通过position:absolute定位配合z-index:1让编号浮在图片上方。编号使用index1动态生成和显示模式一一对应方便对照查看。5.3 图片容器所有image都设置了统一的宽度100%和高度300rpx这样可以在相同尺寸的容器内对比不同mode的显示效果。background-color设为#eee在图片加载前或图片透明时能看到容器的实际大小。六、扩展实践增加编号显示在此基础上在每个图片显示模式的文字说明上方增加编号。实现思路给每个mode-item设置position:relative作为定位父容器添加一个mode-num元素设置position:absolute定位在左上角用{{index 1}}动态生成编号从1开始设置合适的宽高、背景色、文字颜色和圆角做成圆形标签样式z-index设为1确保编号显示在图片上方编号功能虽然简单但大大提升了演示页面的可读性——用户可以快速找到对应的模式特别适合教程类页面使用。七、注意事项image组件的默认尺寸是300px × 225px不是按图片原始大小显示的src支持本地路径和网络路径本地路径建议用绝对路径/开头mode属性值注意大小写比如aspectFit不能写成aspectfitwidthFix模式下image的高度由图片宽高比和宽度决定不需要设置height网络图片需要在小程序后台配置downloadFile合法域名大量图片时建议开启lazy-load懒加载提升页面性能用wx:for循环渲染图片列表时wx:key建议用mode或id不要用默认的index八、总结image组件虽然只是一个基础组件但mode属性提供了非常丰富的显示模式覆盖了绝大多数图片展示场景。最常用的是aspectFill填满容器保持比例和widthFix宽度固定高度自适应两种。掌握好image的13种显示模式在实际开发中遇到图片布局问题时就能游刃有余。