一、前言在小程序开发中图片展示是高频业务场景。很多开发者会遇到图片拉伸变形、图片显示不全、裁剪模式不生效等问题本质是没有正确使用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; }八、效果展示
企业数字化 ERP 产品动态
相关推荐
华为云码道实战记录：零基础用代码智能体造出一个教材下载器 华为云码道实战记录：零基础用代码智能体造出一个教材下载器 一个非科班出身的用户，在代码智能体辅助下从零到一完成了真实项目开发，后期借助华为云码道 CodeArts 智能体进行验证整理与提交。 开篇：为什么我敢动这个念头
老实说&a… · 2026/9/25 20:03:37
HuggingFace｜开源静态工程尽调｜nanowhale： 轻量化模型原型仓库源码快照评测 HuggingFace｜开源静态工程尽调｜nanowhale： 轻量化模型原型仓库源码快照评测专栏：开源项目一页纸综述 | Valhalla‑Matrix 工程评测
评测快照 commit：96abd9fde2b92a8e617e430eb30aad89e32c4dfd
仓库地址：ht… · 2026/9/25 20:03:18
xgplayer Monorepo 仓库导航与工程化开发指南：一份面向开发者和 Agent 的全局地图解读 音视频前端 【免费下载链接】xgplayer A HTML5 video player with a parser that saves traffic 项目地址： https://gitcode.com/gh_mirrors/xg/xgplayer 点击查看 免费下载 本文基于 AGENTS.md（即仓库根部的全局 Agent 地图）撰写࿰… · 2026/9/25 20:02:35
自托管云开发平台Coder接入AI编码代理：部署实践与踩坑指南 如果你正在寻找一套能自己控制的云开发环境，Coder 这个名字应该不陌生。它是一个自托管云开发平台的典型代表，我最近把 Coder 和 AI 编码代理接在一起用了一轮，整体跑下来感受很深：环境管理可以像资源调度一样干净利落，… · 2026/9/25 20:34:30
光伏电池发电原理：从光子到电子的能量转换之旅 1. 引言
随着全球对清洁能源需求的日益增长，光伏发电作为最具代表性的可再生能源技术之一，正走进千家万户。从屋顶的分布式光伏板到广袤的沙漠光伏电站，光伏电池将太阳光直接转化为电能，为人类提供源源不断的绿色电力。那么&#… · 2026/9/25 20:34:18
LibreChat自托管部署实战：用Docker Compose统一管理多模型AI聊天 上个月我把 LibreChat 部署到了自己的一台小服务器上，然后默默把浏览器里那一排 AI 网页标签页全部关掉了。LibreChat 是一个开源的、支持自托管的多模型聊天平台——不只是接一家模型，而是把 OpenAI、Anthropic、Google、OpenRouter，以及本地… · 2026/9/25 20:33:59
高副低代详解：从凸轮到齿轮的机构运动分析 每次给同事讲凸轮机构的运动分析，我都会先让他们做一个看上去有点“多此一举”的操作：把凸轮与从动件在接触点处的高副，替换成一根虚拟连杆加两个转动副。很多人不理解，觉得接触点明明就在那儿，几何关系看得很清楚&… · 2026/9/25 20:33:53
video-use：命令行视频处理套件，让ffmpeg更易用 “video-use”这个名字，第一次听容易让人摸不着头脑——它是干啥的？看视频的？剪视频的？我最初拿到这个项目时也愣了一下，翻完代码和文档才明白，它其实是一个把“视频怎么用”这件事做成了工具链的命令行视频… · 2026/9/25 20:33:46
创维E900V22D刷机全攻略：S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战：从Mosquitto到EMQX /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37
 Hi9252 (60V/3A) 异步降压控制器 低待机 60uA 聚能芯半导体一级代理)
