任務3 添加圖片

任務描述

完成圖片添加，設置圖片樣式，實現圖片居中顯示功能。

1）把圖片復制到項目中。

2）顯示圖片。

3）修改圖片樣式，實現兩張圖片居中顯示。

操作步驟

1 打開一個微信小程序項目，鼠標指針指向組件窗口中某一個文件，單擊鼠標右鍵，執(zhí)行“硬盤打開”命令，如圖1-15所示。

2 在pages目錄下，創(chuàng)建images文件夾，如圖1-16所示。

3 把一個圖片文件復制到images文件夾中，將它命名為t1.jpg，如圖1-17所示。

4 在項目中再創(chuàng)建一個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所示。