文章目录
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%;
}
效果: