下载掌阅APP，畅读海量书库
立即打开
完成一个拼图对接的布局，如图2-12所示。
图2-12 拼图对接的布局
1）把两张拼图图片置入页面中。
2）调整图片的大小，两张图能在同一行显示。
3）设置图片的位置，完成拼图对接。
1 添加图片，在组件清单上右击鼠标，执行“硬盘打开”命令，建立images目录，并把素材图片复制到images目录中，如图2-13所示。
2 打开index.wxml，添加两个＜image＞组件，并设置图片路径，效果如图2-14所示。
图2-13 执行“硬盘打开”命令
图2-14 添加两个＜image＞组件并设置图片路径后的效果
页面中的＜image src="../../images/m1.png"＞使用../../images路径，是因为images目录与pages同级。如果images目录创建在pages内，那么路径应使用../images。
margin-left:-50rpx的使用是正确的，有需要时，参数可以取负数。
3 打开index.wxss，添加.pic1、.pic2等样式，实现页面效果，如图2-15所示。
图2-15 页面效果
4 打开index.wxss，在.pic2样式代码中添加“margin-left:-50rpx”，把拼图成功对接，如图2-16所示。
图2-16 拼图成功对接
小程序支持两种引用图片的方法，一种是本地引用，一种是网络资源引用。
（1）本地引用
本地引用即加载本地的图片，例：
＜image src="../../images/m1.png"＞
图片“../../images/m1.png”也可以写成“/images/m1.png”，表示m1.png文件必须保存在当前项目的根目录的images子文件夹中。
（2）网络资源引用
网络资源引用即加载网络资源的图片，例：
＜image src="https://www.baidu.com/img/bd_logo1.png"＞
图片来自一个网址。