微信小程序开发教程-image组件

介绍

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>

原文出处:/show_1GW3XL9J2HN0.html