微信小程序开发 image mode属性显示图片对应的格式详解

image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

	属性	类型	默认值	必填	说明	最低版本
	src	string		否	图片资源地址	1.0.0
	mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
	合法值 说明 最低版本 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3 top 裁剪模式，不缩放图片，只显示图片的顶部区域 bottom 裁剪模式，不缩放图片，只显示图片的底部区域 center 裁剪模式，不缩放图片，只显示图片的中间区域 left 裁剪模式，不缩放图片，只显示图片的左边区域 right 裁剪模式，不缩放图片，只显示图片的右边区域 top left 裁剪模式，不缩放图片，只显示图片的左上边区域 top right 裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域
	webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源	2.9.0
	lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0
	show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 支持识别的码：小程序码 仅小程序支持识别的码：微信个人码、微信群码、企业微信个人码、 企业微信群码与企业微信互通群码；	2.7.0
	binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
	bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0

---

我们来开始吧

我展示的图片

图片信息

上代码

scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

效果

---

aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

效果

---

widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

效果

---

heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

效果

---

top 裁剪模式，不缩放图片，只显示图片的顶部区域

效果

---

bottom 裁剪模式，不缩放图片，只显示图片的底部区域

效果

---

center 裁剪模式，不缩放图片，只显示图片的中间区域

效果

---

left 裁剪模式，不缩放图片，只显示图片的左边区域

效果

---

right 裁剪模式，不缩放图片，只显示图片的右边区域

效果

---

top left 裁剪模式，不缩放图片，只显示图片的左上边区域

效果

---

top right 裁剪模式，不缩放图片，只显示图片的右上边区域

效果

---

bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域

效果

---

bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

效果

---

总结

不管是学习还是工作中，每一个mode都有适合出现的场景，绝大部分情况下 heightFix和aspectFit 、widthFix已经可以完成你需要展示的效果了，不需要死记硬背看我博客就好咯。