跳到主要内容

图片 Image

图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等。

安装使用

{
// 原生小程序
"usingComponents": {
"ti-image": "@titian-design/weapp/image/index"
},
// titan-cli搭建的项目
"usingComponents": {
"ti-image": "platform://titian-mp/ti-image"
}
}

用法示例

基础用法

<ti-image width="180" height="180" src="{{src}}" />

填充模式

<ti-image mode="contain" width="180" height="180" src="{{src}}" />
<ti-image mode="cover" width="180" height="180" src="{{src}}" />
<ti-image mode="fill" width="180" height="180" src="{{src}}" />
<ti-image mode="none" width="180" height="180" src="{{src}}" />
<ti-image mode="scaleDown" width="180" height="180" src="{{src}}" />

自定义圆角

use-global-style设置为true,可跟随全局圆角风格,即受控于css变量--base-radius-size

<ti-image radius="18" width="100" height="100" src="{{src}}" />
<ti-image radius="100%" width="100" height="100" src="{{src}}" />
<ti-image use-global-style width="100" height="100" src="{{src}}" />

懒加载

<ti-image lazy-load src="{{src}}" />

图片比例(宽高比)

aspect-ratio设置inherit,可跟随全局比例风格,即受控于css变量--image-aspect-ratio;也可以设置具体的宽高比。

<ti-image aspect-ratio="2" src="{{src}}" />
<ti-image aspect-ratio="inherit" src="{{src}}" />

加载中提示

更多可用iconName详见ti-icon组件

<ti-image loading-icon="default-pic" src="{{src}}" />
<ti-image src="{{src}}">
<div slot="loading" />
</ti-image>

加载失败提示

更多可用iconName详见ti-icon组件

<ti-image error-icon="default-pic" src="{{src}}" />
<ti-image src="{{src}}">
<div slot="error" />
</ti-image>

ti-image API

属性 Properties

名称类型必填默认值说明备注
srcstring-图片资源地址-
modestringscaleToFill图片填充模式,可选类型-
widthstring-宽度,默认单位为 px-
heightstring-高度,默认单位为 px-
radiusstring-圆角,默认单位为 px-
show-loadingbooleanfalse是否展示图片加载中提示-
show-errorbooleanfalse是否展示图片加载失败提示-
loading-iconstringdefault-pic加载中显示的图标-
error-iconstringdefault-pic加载失败显示的图标-
loading-icon-sizenumber72加载中显示的图标,尺寸-
error-icon-sizenumber72加载失败显示的图标,尺寸-
use-loading-slotbooleanfalse使用 loading 插槽-
use-error-slotbooleanfalse使用 error 插槽-
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载-
use-global-stylebooleanfalse设为true,可跟随全局圆角风格,即受控于css变量--base-radius-size-
aspect-ratiostring | number-1宽高比,如果设置为inherit,可跟随全局比例风格,即受控于css变量--image-aspect-ratio-
ext-stylestring | Record<string, string>-根节点样式-

图片填充模式(mode)

名称含义
contain同 aspectFit, 保持宽高缩放图片,使图片的长边能完全显示出来
cover同 aspectFill, 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边
fill同 scaleToFill,拉伸图片,使图片填满元素
none同 center,保持图片原有尺寸
scale-down内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些
top裁剪模式,不缩放图片,只显示图片的顶部区域
bottom裁剪模式,不缩放图片,只显示图片的底部区域
center裁剪模式,不缩放图片,只显示图片的中间区域
left裁剪模式,不缩放图片,只显示图片的左边区域
right裁剪模式,不缩放图片,只显示图片的右边区域
top left裁剪模式,不缩放图片,只显示图片的左上边区域
top right裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right裁剪模式,不缩放图片,只显示图片的右下边区域

事件 Events

名称参数列表描述备注
bind:load(e: WechatMiniprogram.CustomEvent<{width: number, height: number}>) => void当图片载入完毕时触发-
bind:error(e: WechatMiniprogram.CustomEvent) => void当错误发生时触发-

插槽 Slots

名称说明备注
loading加载中展示-
error加载失败展示-

外部样式类 External Classes

名称说明备注
ext-class根节点样式类-

CSS 变量 CSS Variable

变量默认值说明备注
--image-aspect-ratio1图片比例,aspect-ratio属性为inherit下生效,一般设置在项目根节点,作用于全局-
--base-radius-size0rpx图片圆角,use-global-style属性为true下生效,一般设置在项目根节点,作用于全局-