小程序组件 —— 23 组件案例 - 轮播图图片添加

上一节实现了轮播图的最外层结构，但是没有通过轮播图来渲染图片，这一节我们先讲一下小程序中怎么来渲染图片，讲解完之后会通过轮播图来展示图片；

在微信小程序中，如果需要渲染图片，需要使用 image 组件，常用的属性有 4 个：

• src 属性：图片资源地址；
• mode：图片裁剪、缩放的模式；
• show-menu-by-longpress：长按图片显示菜单，可以将图片转发给好友、收藏或者保存图片等功能；
• lazy-load：图片懒加载；

在使用 image 时有两个注意事项：

• iamge 有默认的宽度和高度，宽是 320 px，高度是 240 px；
• image 组件不给 src 属性设置图片地址，也占据宽和高；

下面我们打开微信开发者工具，打开首页 index 文件夹，选择 index.wxml 文件，在最底部添加 image 组件并在 src 属性中添加图片地址，就可以在模拟器界面看到加载的 img 图片，如下：

代码中需要的图片可以从 gitcode 中下载（图片素材源自尚硅谷，非个人所有，无意冒犯）；

mode 属性用于图片的裁剪和缩放处理，填写属性值 top left 将展示图片的左上角，如下：

将 mode 的属性值设置为 top right 将展示图片的右上角，如下：

top left 和 top right 是使用 mode 的裁剪模式，mode 中还有缩放模式，将 mode 值设置为 aspectFIll 表示使用缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取，如下：

如果想完整展示图片，可以使用 mode 的 aspectFit 参数值，aspectFit 缩放模式会保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来，如下图所示：

因为使用 aspectFit 会使图片完整显示出来，所以可以看到上图中左侧有部分区域陆佰，这里我们需要注意一下；

show-menu-by-longpress 接收一个布尔值作为参数，我们忽略参数值，表示取值为 true；填写完毕之后我们长按图片，底部会出现一个弹窗，里面有四个功能，如下：

lazy-laod 是图片懒加载功能，只有当滑动到一定的距离（上下三屏）的时候，才会展示图片；

通过上面的演示我们知道了 image 的具体用法，现在我们把这段代码删除，在 swiper 中的 swiper-item 中添加图片轮播功能，具体如下：

具体的图片资源可以从 gitcode 中下载（图片资源源自尚硅谷，非个人所有，无意冒犯），可以看到目前图片没有充满整个宽度，我们使用 css 调整一下宽度，在 index.scss 文件中 swiper-item 中调整一下宽度，如下：

由于我们使用图片填充了轮播图区域，所以 css 样式中保存的背景颜色也可以删除了，最后的效果如上图所示；

参考视频：尚硅谷微信小程序开发教程