任务3 添加图片

任务描述

完成图片添加，设置图片样式，实现图片居中显示功能。

1）把图片复制到项目中。

2）显示图片。

3）修改图片样式，实现两张图片居中显示。

操作步骤

1 打开一个微信小程序项目，鼠标指针指向组件窗口中某一个文件，单击鼠标右键，执行“硬盘打开”命令，如图1-15所示。

2 在pages目录下，创建images文件夹，如图1-16所示。

3 把一个图片文件复制到images文件夹中，将它命名为t1.jpg，如图1-17所示。

4 在项目中再创建一个images文件夹，使它与pages目录同级，如图1-18所示。

5 把另一个图片文件复制到新建的images文件夹中，将它命名为t2.jpg，如图1-19所示。

6 t1.jpg与t2.jpg分别在不同的images文件夹中，如图1-20所示。

7 打开index/index.wxml文件，添加＜image src="../images/t1.jpg"＞＜/image＞语句，会看到左边的手机模拟器中呈现了t1.jpg的图像，如图1-21所示。

8 打开index/index.wxml文件，添加＜image src="../../images/t2.jpg"＞＜/image＞语句，会看到左边的手机模拟器中呈现了t2.jpg的图像，如图1-22所示。

9 打开index/index.wxss文件，添加image样式：

设置“width:200rpx”“height:200rpx”，实现指定图片的宽度和高度的效果，如图1-23所示。

10 打开index/index.wxss文件，添加page样式：

设置“text-align:center”，实现图片居中的效果，如图1-24所示。