企业官网建设流程全解析

一、image组件简介

image组件是小程序中用来显示图片的组件，功能非常强大。它支持多种图片显示模式（mode属性），可以适应不同的布局需求。与HTML中的img标签不同，小程序的image组件有默认宽度300px、默认高度225px，并且支持13种不同的显示模式。

二、image组件的常用属性

• src：图片资源地址

• mode：图片裁剪、缩放的模式，默认值为scaleToFill

• lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

• show-menu-by-longpress：长按图片是否显示菜单

• bindload：当图片载入完毕时触发

• binderror：当错误发生时触发

三、13种显示模式详解

image组件的mode属性有13种取值，分为两大类：

3.1 缩放类（4种）

1. scaleToFill：不保持纵横比缩放，使图片完全拉伸填满image元素
2. aspectFit：保持纵横比缩放，使图片的长边能完全显示出来（完整显示图片）
3. aspectFill：保持纵横比缩放，只保证图片的短边能完全显示出来（填满容器，长边裁剪）
4. widthFix：宽度不变，高度自动变化，保持原图宽高比不变

3.2 裁剪类（9种）

以下模式都不缩放图片，只显示图片的某个区域：

1. top：显示顶部区域
2. bottom：显示底部区域
3. center：显示中间区域
4. left：显示左边区域
5. right：显示右边区域
6. top left：显示左上角区域
7. top right：显示右上角区域
8. bottom left：显示左下角区域
9. bottom right：显示右下角区域

四、实战项目

下面做一个完整的image组件演示，展示全部13种显示模式的效果对比。并在每个模式的文字说明上方增加编号，方便对照查看。

4.1 index.wxml

<navigation-bartitle="image组件"back="{{false}}"color="black"background="#F8F8F8"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="box"><viewclass="title">image组件显示模式</view><viewclass="mode-item"wx:for="{{modes}}"wx:key="mode"><viewclass="mode-num">{{index + 1}}</view><imageclass="mode-image"src="{{imgSrc}}"mode="{{item.mode}}"></image><viewclass="mode-text">{{item.mode}}：{{item.desc}}</view></view></view></scroll-view>

4.2 index.wxss

page{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.js

Page({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让编号浮在图片上方。编号使用index+1动态生成，和显示模式一一对应，方便对照查看。

5.3 图片容器

所有image都设置了统一的宽度（100%）和高度（300rpx），这样可以在相同尺寸的容器内对比不同mode的显示效果。background-color设为#eee，在图片加载前或图片透明时能看到容器的实际大小。

六、扩展实践：增加编号显示

在此基础上，在每个图片显示模式的文字说明上方增加编号。实现思路：

1. 给每个mode-item设置position:relative，作为定位父容器
2. 添加一个mode-num元素，设置position:absolute，定位在左上角
3. 用{{index + 1}}动态生成编号，从1开始
4. 设置合适的宽高、背景色、文字颜色和圆角，做成圆形标签样式
5. z-index设为1，确保编号显示在图片上方

编号功能虽然简单，但大大提升了演示页面的可读性——用户可以快速找到对应的模式，特别适合教程类页面使用。

七、注意事项

1. image组件的默认尺寸是300px × 225px，不是按图片原始大小显示的
2. src支持本地路径和网络路径，本地路径建议用绝对路径（/开头）
3. mode属性值注意大小写，比如aspectFit不能写成aspectfit
4. widthFix模式下，image的高度由图片宽高比和宽度决定，不需要设置height
5. 网络图片需要在小程序后台配置downloadFile合法域名
6. 大量图片时建议开启lazy-load懒加载，提升页面性能
7. 用wx:for循环渲染图片列表时，wx:key建议用mode或id，不要用默认的index

八、总结

image组件虽然只是一个基础组件，但mode属性提供了非常丰富的显示模式，覆盖了绝大多数图片展示场景。最常用的是aspectFill（填满容器，保持比例）和widthFix（宽度固定，高度自适应）两种。掌握好image的13种显示模式，在实际开发中遇到图片布局问题时就能游刃有余。