微信小程序（3）：图像媒体组件的用法

image 图片

支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

1、基本用法 src

引入网络图片：

<image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg">image>

引入本地图片：

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

其中文件目录如下图，/ 表示根目录

2、mode：图片裁剪、缩放的模式

3、lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

4、show-menu-by-longpress：开启长按图片显示识别小程序码菜单

<image src="/images/1.jpg" show-menu-by-longpress>image>

5、三栏式布局

index.wxml文件代码：

<view class="out">
  <image src="/images/1.jpg" mode="widthFix"></image>
  <view class="txt">图片名称</view>
</view>

<view class="out">
  <image src="/images/1.jpg" mode="widthFix"></image>
  <view class="txt">图片名称</view>
</view>

<view class="out">
  <image src="/images/1.jpg" mode="widthFix"></image>
  <view class="txt">图片名称</view>
</view>

index.wxss文件代码：

.out{
     
  width: 30%;
  float: left;
  margin: 1.5%;
}

.out image{
     
  width: 100%;
}

效果：