任务3 添加图片

任务描述

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

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

2）显示图片。

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

操作步骤

启动微信小程序项目后，将光标移动至组件窗口的特定文件上，点击鼠标的右键，选择“在硬盘上打开”的操作，具体操作步骤如图1-15演示。

图1-15 执行“硬盘打开”命令

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

图1-16 创建文件夹

将图片文件拷贝至指定文件夹，并对其进行重命名，新命名为“t1.jpg”，具体操作步骤可参照图1-17。

在项目内部新增一个与现有目录平级的子文件夹，具体操作可参照图1-18进行。

将另一张图片文档复制至新建立的目录里，并为它取名为“t2.jpg”，具体操作步骤可参照图1-19。

图1-17 把一个图片文件复制到文件夹中

图1-18 再创建一个文件夹

图1-19 把另一个图片文件复制到新建的文件夹中

t1.jpg和t2.jpg存放在各自的独立文件夹内，具体位置如图1-20所示。

图1-20 t1.jpg与t2.jpg分别在不同的文件夹中

在.wxml文件中进行编辑，加入＜src="..//t1.jpg"＞＜/＞这段代码后，你会在左侧的手机模拟器上观察到t1.jpg图片的显示，具体效果如图1-21所展示。

图1-21 呈现了t1.jpg的图像

在.wxml文件中进行编辑，加入＜ src="../..//t2.jpg"＞＜/＞这段代码后，你会在左侧的手机模拟器上观察到t2.jpg图片的显示，具体效果如图1-22所展示。

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

通过设定冒号“:”，可以调整指定图片的显示宽度和高度，具体操作方法如图1-23所示。

图1-22 呈现了t2.jpg的图像

图1-23 指定图片的宽度和高度的效果

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

图1-24 图片居中的效果

知识链接

在微信小程序的开发过程中，可以将所需的图像图标文件直接导入至项目之中，同时，通过调整样式参数，确保它们能够呈现出理想的视觉效果。

在引用图片文件时，必须掌握图像资源的路径。

在引

＜ src="..//t1.jpg"＞＜/＞

＜ src="../..//t2.jpg"＞＜/＞

在这两个组件中，第二个src的路径相较于第一个，多出了一个“../”。尽管这两个目录的名称相同，但它们所位于的目录层级却存在差异。