微信小程序实验：image 组件 14 种图片显示模式-北京尧图网络

一、实验目的掌握小程序image图片组件mode属性的 14 种显示模式理解缩放模式与裁剪模式的区别练习wx:for列表渲染完成作业拓展为每一种模式增加顺序编号了解webview渲染引擎对裁剪模式的支持。知识点image 组件 mode 属性分为缩放模式、裁剪模式部分裁剪模式仅 webview 渲染引擎支持。wx:for列表渲染循环下标index实现自动生成序号。本地图片资源引用项目内图片路径写法。app.json 配置渲染引擎renderer:webview。二、实验环境微信开发者工具新建空白小程序项目不使用云服务、不使用模板。本项目使用本地图片shanchuanheliu.jpg仅一张图片通过 mode 属性实现 14 种不同显示效果。三、项目目录结构image组件 ├─images # 存放本地图片与pages同级 │ └─shanchuanheliu.jpg ├─pages │ └─index │ ├─index.js │ ├─index.json │ ├─index.wxml │ └─index.wxss ├─app.js ├─app.json └─app.wxss四、代码实现1.index.wxml使用wx:for循环遍历图片模式数组作业拓展利用index1生成从 1‑14 的模式编号。!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitle图片的不同显示模式/view block wx:for{{imgArray}} wx:keymode !--作业拓展增加模式编号index从0开始index1得到1开始的序号-- view classnum-text显示模式编号{{index1}}/view view{{item.text}}/view view classimg-layout image src{{src}} mode{{item.mode}}/image /view /block /view /scroll-view2.index.jssrc指定本地图片路径imgArray数组存放全部 14 种 mode 模式与文字说明。// index.js Page({ data: { //本地图片路径图片名称shanchuanheliu.jpg src: /images/shanchuanheliu.jpg, //显示图片模式及文字说明数组共14种模式 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 支持 }] } })3.index.wxss新增.num‑text样式用于显示红色模式编号设置 image 固定宽高灰色背景。/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } /*作业新增模式编号样式红色加粗*/ .num-text{ font-size:34rpx; color:red; margin-top:20rpx; font-weight:bold; } .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.app.json重要配置设置renderer:webview裁剪类模式top、bottom、left 等才可以正常生效。{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black }, style: v2, renderer: webview, rendererOptions: {} }五、运行效果页面标题为红色 “图片的不同显示模式”循环展示 14 种图片显示方案每一项最上方红色文字输出显示模式编号1、显示模式编号2…… 一直到 14使用同一张shanchuanheliu.jpg图片依靠 mode 属性分别展示缩放、裁剪不同视觉效果页面支持纵向滚动可以浏览全部 14 个案例。六、实验总结image 组件mode属性分为缩放模式与裁剪模式top/bottom/left/right 这类裁剪模式必须 webview 渲染引擎才生效skyline 不支持。wx:for循环内置index下标下标从 0 开始想要从 1 开始编号表达式写index1完成本次作业拓展。本地图片路径写法/images/图片名.jpg最开头的/代表从项目根目录开始查找图片斜杠丢失会导致图片加载失败。本案例仅使用一张图片通过更换 mode 属性就实现十几种不同展示效果不需要准备多张图片。常见问题排查图片空白检查 images 文件夹位置、文件名拼写shanchuanheliu.jpg、路径开头斜杠。裁剪模式没有效果确认 app.json 配置renderer:webview修改配置后清缓存重新编译。看不到编号确认 wxml 中写好了view classnum-text显示模式编号{{index1}}/view。

微信小程序实验：image 组件 14 种图片显示模式

相关推荐

如何用man pages生成专属Linux命令手册PDF

C# WinForm连接SQL Server宿舍管理系统实战

本地化人事档案管理系统：结构化、可审计、可追溯的部署方案

更多资讯

基于 Agones 的多集群游戏服务器统一分配端点（Allocation Endpoint）代理实战指南

Core dump 崩溃排查：JVM 宕机后，那份 core 文件怎么用 gdb 还原现场

ncm转mp3怎么弄？亲测7种实用方法，简单易学

酷狗kgg转mp3怎么弄？7个靠谱方法图文详解

湖州高端定制浴室柜定制工厂实力公司推荐本地靠谱服务商

32位ODAC免安装拷贝版配置与避坑指南

今日更新

再见，SSE！你好，Streamable HTTP！轻松开发 Streamable HTTP MCP Server 并接入 TaoToken

工业软件标准化路线图：国产替代的落地施工图

VCMI安卓版实操指南：原生运行英雄无敌3的3步技术落地

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？