一、前言在小程序开发中图片展示是高频业务场景。很多开发者会遇到图片拉伸变形、图片显示不全、裁剪模式不生效等问题本质是没有正确使用image组件的mode属性。小程序image组件一共提供14 种显示模式缩放模式5 种对图片进行缩放处理适配容器大小裁剪模式9 种不缩放原图截取图片局部区域展示仅 webview 渲染器支持本次实战项目实现以下能力使用wx:for循环遍历全部 14 种图片模式通过index1实现自动序号编号展示每一种模式附带官方说明文案统一图片容器尺寸灰色占位背景页面布局规整兼容 webview 渲染模式保证裁剪模式正常运行二、核心知识点列表循环渲染wx:for遍历数组wx:key保证列表渲染性能image mode 属性区分缩放模式、裁剪模式的底层原理渲染器配置裁剪模式依赖renderer:webview不配置会失效WXSS 语法规范注释规则、禁止使用单行注释避免隐形编译报错动态数据绑定JS 数组数据驱动 WXML 页面渲染三、项目文件结构├── pages │ └── index │ ├── index.js │ ├── index.wxml │ ├── index.wxss │ └── index.json ├── images │ └── daxinganling.jpg //测试图片 ├── app.json ├── app.wxss⚠️注意图片文件夹images需要创建在项目根目录。四、完整源码实现1. app.json关键配置renderer:webview开启后裁剪模式才会生效{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, rendererOptions: { } }2. pages/index/index.json{ usingComponents: {} }3. pages/index/index.js定义 14 种模式数组包含 mode 名称与功能描述通过数据驱动页面渲染//index.js Page({ data:{ //图片路径 src:/images/daxinganling.jpg, //显示图片模式及文字说明数组 imgArray:[ { mode:scaleToFill, text:scaleToFill缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素 }, { mode:aspectFit, text:aspectFit缩放模式保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来 }, { mode:aspectFill, text:aspectFill缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取 }, { mode:widthFix, text:widthFix缩放模式宽度不变高度自动变化保持原图宽高比不变 }, { mode:heightFix, text:heightFix缩放模式高度不变宽度自动变化保持原图宽高比不变 }, { mode:top, text:top裁剪模式不缩放图片只显示图片的顶部区域仅 webview 支持 }, { mode:bottom, text:bottom裁剪模式不缩放图片只显示图片的底部区域仅 webview 支持 }, { mode:center, text:center裁剪模式不缩放图片只显示图片的中间区域仅 webview 支持 }, { mode:left, text:left裁剪模式不缩放图片只显示图片的左边区域仅 webview 支持 }, { mode:right, text:right裁剪模式不缩放图片只显示图片的右边区域仅 webview 支持 }, { mode:top left, text:top left裁剪模式不缩放图片只显示图片的左上边区域仅 webview 支持 }, { mode:top right, text:top right裁剪模式不缩放图片只显示图片的右上边区域仅 webview 支持 }, { mode:bottom left, text:bottom left裁剪模式不缩放图片只显示图片的左下边区域仅 webview 支持 }, { mode:bottom right, text:bottom right裁剪模式不缩放图片只显示图片的右下边区域仅 webview 支持 } ] } })4. pages/index/index.wxml!--index.wxml-- navigation-bar titleimage组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle图片的不同显示模式/view block wx:for{{imgArray}} wx:keymode !-- 作业扩充输出编号显示模式编号{{index1}} -- view显示模式编号{{index1}}/view view{{item.text}}/view view classimg-layout image src{{src}} mode{{item.mode}}/image /view /block /view /scroll-view5. pages/index/index.wxss重要WXSS 不支持//单行注释注释必须写在文件最顶部不能插入选择器和大括号中间/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .img-layout { text-align: center; margin-top: 20rpx; margin-bottom: 40rpx; } image { width: 480rpx; height: 480rpx; background-color: #eee; }6. app.wxss/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /**app.wxss**/ .box { /* 设置外边距 */ margin: 20rpx; /* 设置内边距 */ padding: 20rpx; /* 设置边框 */ border: 2rpx solid silver; } .title { /* 设置字体大小 */ font-size: 40rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置居中对齐 */ text-align: center; /* 设置下外边距 */ margin-bottom: 30rpx; /* 设置字体颜色 */ color: red; }五、部署运行说明在项目根目录新建images文件夹放入测试图片daxinganling.jpg确认app.json中配置renderer:webview裁剪模式必须开启该配置否则不会生效代码所有标点符号必须为英文半角符号避免编译报错图片路径使用绝对路径/images/daxinganling.jpg不要写错斜杠六、14 种模式原理详解缩放模式5 种表格mode效果说明scaleToFill默认模式拉伸图片填满容器图片会发生变形aspectFit完整显示整张图片保持原始比例容器会出现留白aspectFill图片铺满容器超出部分裁剪图片不变形widthFix宽度固定高度根据图片比例自动计算heightFix高度固定宽度根据图片比例自动计算裁剪模式9 种特性不会缩放原图只截取图片的局部区域展示必须开启 webview 渲染器才生效表格mode效果说明top截取图片顶部bottom截取图片底部center截取图片中间left截取图片左侧right截取图片右侧top left截取图片左上角top right截取图片右上角bottom left截取图片左下角bottom right截取图片右下角七、高频踩坑 报错解决1. 裁剪模式完全没有效果✅原因没有配置app.json的renderer:webview✅解决方案在 app.json 顶层添加renderer:webview2. image 图片空白不显示✅原因图片路径错误图片没有放到根目录 images 文件夹✅解决方案路径写/images/daxinganling.jpg保证图片文件存在。3. WXSS 编译报错控制台报样式错误WXSS不支持//单行注释只能使用/** 注释 **/注释不能写在选择器和大括号中间必须放在文件最开头禁止使用中文全角大括号、中文标点符号❌错误写法/* 错误注释插在选择器和大括号之间 */ .container /* 这里不能写注释 */ { padding:20rpx; }✅正确写法/** 写在文件最顶部 **/ .container { padding:20rpx; }八、效果展示