一、实验目的掌握小程序image组件的基本用法理解src图片资源路径配置。熟练使用mode属性认识 14 种图片显示模式区分缩放模式与裁剪模式。练习wx:for列表渲染实现循环输出图片模式编号。区分 webview 与 skyline 渲染引擎差异部分裁剪模式仅 webview 引擎生效。掌握本地图片资源导入排查图片加载失败的常见问题。二、实验环境开发工具微信开发者工具项目基础小程序项目不启用云开发技术WXML、WXSS、JavaScript项目目录根目录新建images文件夹存放 jpg 格式图片三、核心知识点image 组件专门用来展示图片src填写图片路径本地路径开头必须带/代表项目根目录。mode 属性控制图片显示方式分为缩放模式、裁剪模式两大类。wx:for‑index获取数组循环下标下标从 0 开始idx1实现从 1 开始的序号编号。渲染引擎renderer:webviewtop、bottom、left、right这类裁剪模式在 skyline 引擎不生效。图片格式小程序模拟器优先支持jpg/pngwebp 格式图片会加载失败。Windows 系统坑点系统默认隐藏文件后缀名容易出现xxx.jpg.webp双重后缀。四、项目文件结构pages └── index ├─ index.wxml ├─ index.wxss ├─ index.js └─ index.json images └─ daxinganling.jpg app.json app.wxss app.js五、完整代码实现1.app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview }2.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:for-indexidx view显示模式编号{{idx1}}/view view{{item.text}}/view view classimg-layout image src{{src}} mode{{item.mode}} / /view /block /view /scroll-view3.index.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; }4.app.wxss/**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; }5.index.js// 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 支持 } ] } })六、运行测试将图片转换为.jpg格式放入项目images文件夹工具菜单清除缓存重新编译。页面滚动浏览 1‑14 组内容每组上方输出 “显示模式编号x”。观察不同mode效果缩放模式拉伸适配裁剪模式截取图片指定区域。灰色背景容器方便对比图片缩放、裁剪变化。七、问题踩坑记录报错 unexpected character原因复制 PPT 代码带入全角长破折号‑替换为英文半角-。图片灰色方块提示加载本地图片资源失败①图片后缀是 webp小程序不识别使用画图另存转为 jpg 格式。 ②Windows 隐藏扩展名出现双重后缀daxinganling.jpg.webp开启文件扩展名修改后缀。 ③路径缺少开头斜杠/。top/bottom/left/right 裁剪模式没有效果原因使用 skyline 新渲染引擎app.json 设置renderer:webview。循环编号从 0 开始解决wx:for-indexidx页面输出{{idx1}}编号从 1 开始。八、实验总结本次实验学习小程序image图片组件通过数组 wx:for循环一次性展示 14 种 mode 显示效果。缩放模式会改变图片大小裁剪模式不缩放只截取部分画面。 开发过程中遇到很多格式问题复制课件代码容易混入全角符号Windows 图片后缀隐藏很容易出现图片加载失败。调试可以先用网络图片快速验证代码逻辑再替换成本地图片减少排错时间。不同渲染引擎对组件属性支持不一样做实验要留意官方兼容性说明。