【入门】小程序的图片应该放在哪里?不妨试试强大的云存储功能
开发小程序的过程是离不开image组件的,如果图片比较少,我们可以直接把图片存储在本地,加入代码包一起上传,但在图片数量多、体积大的时候,将图片存储在本地可能会超过代码包的限制,显然不是一个好的选择。常用的存储方式是将图片传到服务器上,但并不是每个开发者都有自己的服务器,本文将介绍微信云开发中的云存储功能,可以方便快捷、可视化地管理小程序的文件。 打开微信开发者工具,点击左上角的云开发,打开云开发控制台,点击存储进入云存储界面。 [图片] [图片] 在存储管理界面,我们可以点击上传文件、上传文件夹的方式来上传文件,也可以直接从电脑上拖取文件上传,这里我在test文件夹中上传了一张图片,点击文件就可以看到图片的详细信息,例如ETag,下载地址和File ID等。 [图片] 回到小程序,在.wxml中使用image组件,设置参数src为图片的下载地址和File ID都可以显示图片,往往我们还会设置mode="widthFix"来让图片自适应宽度比例显示,代码如下: <!--index.wxml-->
<image src="图片的下载地址 形式为https://..."></image>
<image src="图片的File ID 形式为cloud://..." mode="widthFix"></image>
显示效果如下图,第二张图片的比例更接近原图: [图片] 当然,云存储的强大之处可不只是上传图片,你可以配合云函数来实现小程序内的上传、下载和删除文件,还可以根据文件ID换取临时文件网络链接,详细使用方法请参考官方文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html