介绍
image 是小程序专用图片组件,不能用 HTML 的 <img>,支持 JPG、PNG、SVG、WebP、GIF;
坑
- 不支持自闭合:必须写
<image></image>,不能<image/>; - 网络图片必须 HTTPS,后台配置「request合法域名」;
- WXSS 内
background-image不支持本地图片,优先用 image 组件; - 组件不继承父容器宽高、边距样式,必须手动设置宽高。
显示本地图片
本地图片保存位置
微信小程序开发教程-本地静态图片存放位置(目录images文件夹下)
显示图片
目录结构:/images/avatar.png
<!-- 绝对路径 -->
<image src="/images/avatar.png" style="width:200rpx;height:200rpx;"></image>
<!-- 相对路径(当前页面同级) -->
<image src="../../images/avatar.png"></image>