企业官网建设流程全解析

微信小程序 image 组件：14种图片显示模式完整案例

前言

在微信小程序开发中，image图片组件是最常用基础组件之一。很多新手容易混淆image的mode属性，不同模式下图片的缩放、裁剪行为差异很大。本次案例实现小程序image组件全部14种显示模式的预览演示，并在文字说明上方增加序号编号，直观对比每种mode渲染效果，适合小程序入门学习。

作业需求：

1. 完成image组件案例，展示全部14种图片mode；
2. 在每种模式文字说明上方增加图片显示模式编号；
3. 小程序代码可打包上传；
4. 撰写技术博客记录案例。

一、项目结构

MINIPROGRAM-4 ├── components │ └── navigation-bar # 自定义导航栏组件 ├── images │ └── daxinganling.jpg # 测试图片 └── pages └── index ├── index.js ├── index.wxml ├── index.wxss └── index.json

二、代码实现

1. index.js 逻辑层

在data中定义图片路径，并且用数组存储14种mode模式和对应的文字说明。

Page({ data: { //图片路径，项目根目录images下放 daxinganling.jpg src: '/images/daxinganling.jpg', //14种图片mode模式数组 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 支持' } ] } })

2. index.wxml 结构层

重点：wx:for-index拿到循环下标index，{{index+1}}生成序号，放在文字说明上方，满足作业扩充要求。

<navigation-bar title="image组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">图片的不同显示模式</view> <!-- wx:for-index 获取循环下标，编号=index+1 --> <block wx:for="{{imgArray}}" wx:key="mode"> <view>显示模式编号: {{index+1}}</view> <view>{{item.text}}</view> <view class="img-layout"> <image src="{{src}}" mode="{{item.mode}}"></image> </view> </block> </view> </scroll-view>

3. 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. index.json 配置文件

引入自定义导航栏组件

{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } }

三、核心知识点讲解

image组件 mode 属性分为两大类

1. 缩放模式：scaleToFill、aspectFit、aspectFill、widthFix、heightFix
   • scaleToFill：不保持原图比例，强行拉伸填满容器，图片容易变形；
   • aspectFit：保持比例，完整显示整张图，长边贴合容器，会留白；
   • aspectFill：保持比例，短边填满容器，长边超出部分会被裁剪；
   • widthFix：宽度固定，高度自适应，维持原图宽高比；
   • heightFix：高度固定，宽度自适应，维持原图宽高比。
2. 裁剪模式：top/bottom/center/left/right/top left/top right/bottom left/bottom right

裁剪模式不会缩放图片，直接截取原图对应区域展示；这类模式仅webview渲染环境生效，部分小程序基础渲染环境下效果不明显。

作业扩充点说明

题目要求：图标显示模式的文字说明上方增加图片显示模式的编号。
实现思路：wx:for-index获取数组循环索引（索引从0开始），所以index+1生成从1~14的序号，放在item.text文字描述上方，遍历渲染每一条模式。

四、运行效果

编译运行小程序后，页面从上向下滚动，依次展示1~14号图片模式：

1. 先显示编号
2. 再显示该mode的文字解释
3. 下方展示图片渲染效果
   可以直观对比每一种mode对同一张图片的渲染差异。

五、打包提交说明

1. 代码全部编写完成，编译无报错；
2. 在微信开发者工具中，点击【工具】-【压缩项目】，打包代码为压缩包，作为作业附件上传；
3. 将博客发布到博客平台，把博客名称、博客链接写入Word文档，和代码压缩包一起提交。

六、总结

image组件mode是小程序图片展示的核心，日常开发头像、banner、图片列表最常用aspectFill（居中裁剪）和aspectFit（完整展示图片）。
本案例一次性演示全部14种模式，通过循环渲染+序号编号，方便学习和对比。在实际业务开发中，优先选用缩放模式；裁剪模式有平台限制，需要谨慎使用。