插入本地图片
首先,将图片文件放入 miniprogram\images
文件夹中。
然后在小程序代码编辑窗书写wxml代码,注意图片路径。
<image src="../../images/1.jpg"></image>
:::caution
注意,小程序中没有<img>
标签,因此请使用<image>
标签。
:::
插入云图片
:::tip 小程序对程序包的限制
微信小程序要求在没有分包的情况下,小程序的包大小不超过 2M
,因此这就意味着,你不能在小程序文件夹中放过多图片。那么必要的图片都放在哪呢?你可以使用微信的云开发云存储,将文件放到云存储中进行调用(会产生相关费用),或者使用别的图床工具,例如 微博图床
(完全免费)。
:::
在这里,比如我要将图片放入云存储中(云存储的开通合使用将在之后讲解)。
这里有张待添加的图片。我们复制中间的连接,以相同的方式把将其写进wxml代码中。
<image src="cloud://nannan-1g1q4u2i02398ecf.6e61-nannan-1g1q4u2i02398ecf-1311679880/iPhone 13 Pro Max 1.png"></image>
如果使用微博图床。首先将图片上传到图床窗口:
然后复制图片连接,以同样的方式插入wxml代码中。
<image src="https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/img/006SHRs9gy1h3p8r4lj5ej30r20iuwm8.jpg"></image>