跳到主要内容

图片 Image

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

安装使用

import { TiImage } from '@titian-design/mobile-vue'

用法示例

基础用法

<template>
<TiImage :src="src" />
</template>

<script lang="ts" setup>
import { TiImage } from '@titian-design/mobile-vue';
const src = 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png'
</script>

填充模式

<template>
<TiImage mode="contain" width="180" height="180" :src="src" />
<TiImage mode="cover" width="180" height="180" :src="src" />
<TiImage mode="fill" width="180" height="180" :src="src" />
<TiImage mode="none" width="180" height="180" :src="src" />
<TiImage mode="scaleDown" width="180" height="180" :src="src" />
</template>

<script lang="ts" setup>
import { TiImage } from '@titian-design/mobile-vue';
const src = 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png'
</script>

自定义圆角

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

<template>
<TiImage radius="18" width="100" height="100" :src="src" />
<TiImage radius="100%" width="100" height="100" :src="src" />
<TiImage use-global-style width="100" height="100" :src="src" />
</template>

<script lang="ts" setup>
import { TiImage } from '@titian-design/mobile-vue';
const src = 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png'
</script>

懒加载

<template>
<TiImage lazy-load :src="src" />
</template>

<script lang="ts" setup>
import { TiImage } from '@titian-design/mobile-vue';
const src = 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png'
</script>

图片比例(宽高比)

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

<template>
<TiImage :aspect-ratio="2" :src="src" />
<TiImage aspect-ratio="inherit" :src="src" />
</template>

<script lang="ts" setup>
import { TiImage } from '@titian-design/mobile-vue';
const src = 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png'
</script>

加载中提示

更多可用iconName详见TiIcon组件

<template>
<TiImage :loading-icon="iconName" :src="src" />
<TiImage :src="src">
<div slot="loading" />
</TiImage>
</template>

<script lang="ts" setup>
import { TiImage } from '@titian-design/mobile-vue';
const src = 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png'
const iconName = 'default-pic'
</script>

加载失败提示

更多可用iconName详见TiIcon组件

<template>
<TiImage :error-icon="iconName" :src="src" />
<TiImage :src="src">
<div slot="error" />
</TiImage>
</template>

<script lang="ts" setup>
import { TiImage } from '@titian-design/mobile-vue';
const src = 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png'
const iconName = 'default-pic'
</script>

TiImage 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,保持图片原有尺寸
scaleDown内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些
top裁剪模式,不缩放图片,只显示图片的顶部区域
bottom裁剪模式,不缩放图片,只显示图片的底部区域
center裁剪模式,不缩放图片,只显示图片的中间区域
left裁剪模式,不缩放图片,只显示图片的左边区域
right裁剪模式,不缩放图片,只显示图片的右边区域
top left裁剪模式,不缩放图片,只显示图片的左上边区域
top right裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right裁剪模式,不缩放图片,只显示图片的右下边区域

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

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