前言本次案例《4.6 image 组件》学习小程序 image 图片组件掌握mode图片显示模式。按照作业要求在每种图片显示模式的文字说明上方增加图片显示模式的编号直观区分不同 mode 效果。一、知识点介绍image 组件小程序图片标签src指定图片地址mode控制图片缩放、裁剪展示方式。常用 modescaleToFill拉伸填满容器不保持比例aspectFit保持比例完整显示图片aspectFill保持比例铺满容器超出部分裁剪widthFix宽度自适应高度自动变化扩展需求给每一种图片模式增加编号放在文字说明上方。二、完整代码pages/index/index.wxmlview图片显示模式演示/view view【编号1】/view viewscaleToFill拉伸填满/view image src/images/test.jpg modescaleToFill classimg/image view【编号2】/view viewaspectFit保持比例完整显示/view image src/images/test.jpg modeaspectFit classimg/image view【编号3】/view viewaspectFill保持比例铺满裁剪多余部分/view image src/images/test.jpg modeaspectFill classimg/image view【编号4】/view viewwidthFix宽度自适应/view image src/images/test.jpg modewidthFix classimg/imagepages/index/index.jsPage({ })pages/index/index.wxss.img{ width:300rpx; height:200rpx; border:1rpx solid #999; margin:10rpx 0; } view{ margin:12rpx; font-size:30rpx; }说明在项目里新建 images 文件夹放入 test.jpg 图片替换 src。三、运行测试效果页面依次展示 4 种 image 的 mode 效果。每一组图片说明最上方先显示编号【编号 1】【编号 2】等满足作业扩充要求。不同 mode 下图片展示效果不一样直观理解图片缩放裁剪规则。四、核心要点总结image 组件 mode 属性是核心用来控制图片和容器的适配规则。scaleToFill 会拉伸图片容易变形aspectFit、aspectFill 会保持原始宽高比。作业扩展在文字说明上方增加编号区分不同图片显示模式。image 默认有固定宽高需要手动设置 width、height 样式。五、小结本案例学习小程序 image 图片组件理解多种图片显示 mode完成作业扩展为每种图片模式添加编号。image 是小程序展示图片的基础组件广泛用于商品图、头像、轮播图等场景。