一、image组件简介image组件是小程序中用来显示图片的组件功能非常强大。它支持多种图片显示模式mode属性可以适应不同的布局需求。与HTML中的img标签不同小程序的image组件有默认宽度300px、默认高度225px并且支持13种不同的显示模式。二、image组件的常用属性src图片资源地址mode图片裁剪、缩放的模式默认值为scaleToFilllazy-load图片懒加载在即将进入一定范围上下三屏时才开始加载show-menu-by-longpress长按图片是否显示菜单bindload当图片载入完毕时触发binderror当错误发生时触发三、13种显示模式详解image组件的mode属性有13种取值分为两大类3.1 缩放类4种scaleToFill不保持纵横比缩放使图片完全拉伸填满image元素aspectFit保持纵横比缩放使图片的长边能完全显示出来完整显示图片aspectFill保持纵横比缩放只保证图片的短边能完全显示出来填满容器长边裁剪widthFix宽度不变高度自动变化保持原图宽高比不变3.2 裁剪类9种以下模式都不缩放图片只显示图片的某个区域top显示顶部区域bottom显示底部区域center显示中间区域left显示左边区域right显示右边区域top left显示左上角区域top right显示右上角区域bottom left显示左下角区域bottom right显示右下角区域四、实战项目下面做一个完整的image组件演示展示全部13种显示模式的效果对比。并在每个模式的文字说明上方增加编号方便对照查看。4.1 index.wxmlnavigation-bartitleimage组件back{{false}}colorblackbackground#F8F8F8/navigation-barscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitleimage组件显示模式/viewviewclassmode-itemwx:for{{modes}}wx:keymodeviewclassmode-num{{index 1}}/viewimageclassmode-imagesrc{{imgSrc}}mode{{item.mode}}/imageviewclassmode-text{{item.mode}}{{item.desc}}/view/view/view/scroll-view4.2 index.wxsspage{height:100%;}.scrollarea{height:calc(100vh - 100rpx);}.mode-item{position:relative;margin-bottom:30rpx;padding:20rpx;background-color:#f9f9f9;border-radius:10rpx;}.mode-num{position:absolute;top:20rpx;left:20rpx;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background-color:#007aff;color:#fff;font-size:24rpx;border-radius:50%;z-index:1;}.mode-image{width:100%;height:300rpx;background-color:#eee;border-radius:10rpx;}.mode-text{margin-top:15rpx;font-size:26rpx;color:#666;line-height:1.6;}4.3 index.jsPage({data:{imgSrc:/images/demo.jpg,modes:[{mode:scaleToFill,desc:不保持纵横比缩放图片使图片的宽高完全拉伸至填满image元素},{mode:aspectFit,desc:保持纵横比缩放图片使图片的长边能完全显示出来},{mode:aspectFill,desc:保持纵横比缩放图片只保证图片的短边能完全显示出来},{mode:widthFix,desc:宽度不变高度自动变化保持原图宽高比不变},{mode:top,desc:不缩放图片只显示图片的顶部区域},{mode:bottom,desc:不缩放图片只显示图片的底部区域},{mode:center,desc:不缩放图片只显示图片的中间区域},{mode:left,desc:不缩放图片只显示图片的左边区域},{mode:right,desc:不缩放图片只显示图片的右边区域},{mode:top left,desc:不缩放图片只显示图片的左上边区域},{mode:top right,desc:不缩放图片只显示图片的右上边区域},{mode:bottom left,desc:不缩放图片只显示图片的左下边区域},{mode:bottom right,desc:不缩放图片只显示图片的右下边区域}]}})五、代码说明5.1 数据驱动使用wx:for循环渲染13种显示模式每个模式的mode值和说明文字都放在modes数组中统一管理。这样增加或修改显示模式时只需要改数据不用动结构代码。5.2 编号显示每个显示模式的左上角都有一个圆形的蓝色编号从1到13。通过position:absolute定位配合z-index:1让编号浮在图片上方。编号使用index1动态生成和显示模式一一对应方便对照查看。5.3 图片容器所有image都设置了统一的宽度100%和高度300rpx这样可以在相同尺寸的容器内对比不同mode的显示效果。background-color设为#eee在图片加载前或图片透明时能看到容器的实际大小。六、扩展实践增加编号显示在此基础上在每个图片显示模式的文字说明上方增加编号。实现思路给每个mode-item设置position:relative作为定位父容器添加一个mode-num元素设置position:absolute定位在左上角用{{index 1}}动态生成编号从1开始设置合适的宽高、背景色、文字颜色和圆角做成圆形标签样式z-index设为1确保编号显示在图片上方编号功能虽然简单但大大提升了演示页面的可读性——用户可以快速找到对应的模式特别适合教程类页面使用。七、注意事项image组件的默认尺寸是300px × 225px不是按图片原始大小显示的src支持本地路径和网络路径本地路径建议用绝对路径/开头mode属性值注意大小写比如aspectFit不能写成aspectfitwidthFix模式下image的高度由图片宽高比和宽度决定不需要设置height网络图片需要在小程序后台配置downloadFile合法域名大量图片时建议开启lazy-load懒加载提升页面性能用wx:for循环渲染图片列表时wx:key建议用mode或id不要用默认的index八、总结image组件虽然只是一个基础组件但mode属性提供了非常丰富的显示模式覆盖了绝大多数图片展示场景。最常用的是aspectFill填满容器保持比例和widthFix宽度固定高度自适应两种。掌握好image的13种显示模式在实际开发中遇到图片布局问题时就能游刃有余。
企业数字化 ERP 产品动态
相关推荐
老设备还能越狱:palera1n 在 A8–A11 上的 checkm8 越狱完整实操 老设备还能越狱:palera1n 在 A8–A11 上的 checkm8 越狱完整实操 【免费下载链接】palera1n Jailbreak for A8 through A11, T2 devices, on iOS/iPadOS/tvOS 15.0, bridgeOS 5.0 and higher. 项目地址: https://gitcode.com/GitHub_Trending/pa/palera1n
pa… · 2026/9/27 21:38:18
【Agent】【tools】6.LlamaIndex + MCP Usage 案例目标本案例展示了如何使用LlamaIndex与MCP(Model Context Protocol)集成,实现以下目标:从MCP服务器获取工具并集成到LlamaIndex应用中将LlamaIndex工作流转换为MCP应用程序使用MCP客户端与服务器进行交互实现OAuth 2.0认证保护MCP连接管理MCP资源、提… · 2026/9/27 22:03:08
【C 语言】操作符详解(下):逗号、下标、结构体、类型转换与表达式求值 🔥 星光编译者 个人主页
📚 学习专栏: 《C/C 成长笔记》 《Linux 实践手册》 《数据结构与算法》
🌄 向云端飞扬,编译属于自己的代码星河。 ☕ 写在开篇 你好,这里是 星光编译者。 这里记录我在 C/C、… · 2026/9/27 22:03:08
Nature子刊 | 皮层间配对关联刺激(ccPAS)在脑网络中的应用 该研究首次将双位点ccPAS用于边缘型人格障碍患者,靶向右侧IFC-pre-SMA抑制控制环路,以4ms与100ms ISI对照检验通路特异性调控。结果发现两组停止信号反应时均缩短,但无组间差异,提示效应可能非通路特异。(🔗… · 2026/9/27 22:03:01
早期项目怎么找天使投资人?没有熟人资源也能跑通的路径 核心结论:早期项目怎么找天使投资人?常见路径包括结构化匹配服务、线下路演与行业网络、专业 FA 机构等。没有熟人资源的项目方,可以先通过公开渠道、行业网络或结构化匹配服务建立目标名单;进入材料和交易需求较明确的阶段后&… · 2026/9/27 22:02:55
数据质量成本(COPQ)怎么算:把 15%~20% 的营收损失拆成四类可核账成本 数据质量成本(COPQ)怎么算:把 15%~20% 的营收损失拆成四类可核账成本
标签:#数据质量 #数据治理 #成本管理 #数据管理 #数据资产 摘要: 行业口径普遍引用"数据质量问题每年造成企业 15%~20% 的营收损失"“7… · 2026/9/27 22:02:55
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现 简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南:5大注意事项救急 汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习 简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现 简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南:5大注意事项救急 汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习 简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01