Skip to main content

微信小程序开发-举例

插入本地图片

首先,将图片文件放入 miniprogram\images 文件夹中。
image.png
然后在小程序代码编辑窗书写wxml代码,注意图片路径。

<image src="../../images/1.jpg"></image>

image.png

caution

注意,小程序中没有<img>标签,因此请使用<image>标签。

插入云图片

小程序对程序包的限制

微信小程序要求在没有分包的情况下,小程序的包大小不超过 2M,因此这就意味着,你不能在小程序文件夹中放过多图片。那么必要的图片都放在哪呢?你可以使用微信的云开发云存储,将文件放到云存储中进行调用(会产生相关费用),或者使用别的图床工具,例如 微博图床 (完全免费)。

在这里,比如我要将图片放入云存储中(云存储的开通合使用将在之后讲解)。
image.png
这里有张待添加的图片。我们复制中间的连接,以相同的方式把将其写进wxml代码中。

<image src="cloud://nannan-1g1q4u2i02398ecf.6e61-nannan-1g1q4u2i02398ecf-1311679880/iPhone 13 Pro Max 1.png"></image>

如果使用微博图床。首先将图片上传到图床窗口:
image.png
然后复制图片连接,以同样的方式插入wxml代码中。

<image src="https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/img/006SHRs9gy1h3p8r4lj5ej30r20iuwm8.jpg"></image>

页面跳转