图像

<image>

简介 Introduction

通用属性
item desc
src 图片资源地址
请使用在线资源或自建服务器资源,不要使用本地资源
mode 图片裁剪、缩放的模式
saleToFill:不保持纵横比;缩放至填满;图片会变形;默认模式
apectFit:保持纵横比;缩放至完全显示;同contain;可能有留白
apectFill:保持纵横比;缩放至完全填充;同cover;图片会被裁剪*
wdthFix:宽度不变,高度自动变化
hightFix:高度不变,宽度自动变化
show-menu-by-longpress 布尔;默认false;长按图片操作:转发、保存、收藏、识别等
bindload 图片载入完毕时触发
binderror 图片载入错误发生时触发
WebView 特有属性
item desc
lazy-load 布尔;默认false;图片懒加载,在即将进入一定范围(上下三屏)时才开始加载
Skyline 特有属性
item desc
fade-in 布尔;默认false;是否渐显
[] 长按图片转发
<image src="xxx.jpg"  show-menu-by-longpress mode="widthFix"/>
[] 在线图片的使用
. 受小程序大小2M的限制,大多数多媒体资源,如图片、视频、音频等不能本地使用,只能在线获取
方案1:外网在线资源;容易出现死链
方案2:自建资源服务器,详情请参考 静态资源服务器
方案3:利用 - 大树小站 - 提供的在线图片;更多图片持续更新中。。。如果有喜欢的图片,也可以由老师代为更新
[] 背景图片的使用
. 使用背景图片可以省掉部分组件元素
. 但是:默认情况下不支持background-image: url()属性,但是支持渐变背景。。。
方案1:定位;让图片在下面,模拟背景;内容在上面;需要额外增加一个容器提供定位参考
方案2:使用背景渐变:使用多个颜色模拟背景
page {
    background-image: linear-gradient(#0093E9, #80D0C7);
}
方案3:使用 base64 编码:将本地图片转换为 base64 格式后再应用于背景图片;转换工具:图片转 BASE64 编码base64
page {
    background-image: url(data:image/jpeg;base64....);
}