微信小程序image标签的使用

小程序中的图片

在小程序中，我们可以使用<image>标签来添加图片。

<image>标签有以下属性：

• src：图片路径，可以是本地路径或网络路径
• mode：图片裁剪、缩放的模式，默认为"scaleToFill"（缩放以填充整个容器）

示例代码

<!--1. 空图片 -->
<image></image>
<!--2. 使用src指向图片路径 -->
<!-- <image src="/images/1.png" mode="aspectFit"></image> -->
<!-- <image src="/images/1.png" mode="aspectFill"></image> -->
<image src="/images/1.png" mode="widthFix"></image>
<image src="/images/1.png" mode="heightFix"></image>

效果展示

添加指向本地图片的src属性后的显示效果：

CSS样式

<image>标签默认会根据图片的宽高自适应大小，如果没有设置图片的宽高属性，则会使用图片的原始宽高。同时，<image>标签也有默认的边框线，可以通过CSS样式来修改。

image {
  /* 通过边框线证明 image 有默认的宽和高 */
  border: 1px solid red;
}

效果展示：