第三章 开发第一个小程序

3.2 开发投票小程序的首页

3.2.3 使用image图片组件

首页单调，使用image组件丰富页面的内容。

image组件有三个属性：src、mode、lazy-load。

src图片路径

lazy-load 是boolean类型的属性，默认为false，如果设置为true就会开启懒加载模式，，当页面滚动到离图片很近的时候开始加载图片内容，基础库版本要求1.5.0

mode指定图片的显示模式，使用image组件一般会在样式文件为它指定一个特定的大小，image的大小和原始图片的大小不一样，需要进行缩放或者裁剪。mode就是用来指定裁剪或者缩放的属性

mode:

缩放 scaleToFill 不保持比例，使图片宽高完全拉伸至填满

aspectFit 等比缩放了图片

aspectFill 满屏,且不失比例,但是可能不能完整显示图片

widthFix 宽度不变，高度自动变化保持原图宽高比不变

裁剪 top 保持图片原始大小，超出image区域，只显示图片的顶部区域

bootpm

center

left

right

top left

top right

bottom left

bootom right

在项目新建一个images目录（无法用微信开发工具新建和pages同级别的目录，直接到资源管理器打开pages所在工程，新建images文件夹），放置所需要的图片文件，

?编辑

在index.wxml加入images组件：

<!--index.wxml-->
<view class="container">
<view class="btn">
  <image class="btn-img" src="/imgs/btn-img1.png" mode="widthFix"></image>
  单选投票
</view>
<view class="btn">
  <image class="btn-img" src="/imgs/btn-img1.png" mode="widthFix"></image>
多选投票</view>
</view>

在index.wxss为images组件添加样式：

.btn {
  margin:  20rpx;
  padding: 10rpx;
  border: 1rpx solid #26AB28;
  border-radius: 20rpx;
  text-align: center;
  color: #26AB28;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.btn-img {
  width: 50rpx;
  margin-right: 30rpx;
}

效果如图

?