Tantalum UI

Appearance

Return to top
On this page

Image 图片

vue
<template>
  <ta-group title="基础用法">
    <div class="exp-image-flex">
      <ta-row :gutter="[16, 16]">
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            :aspect-ratio="1"
            @error="onError"
          ></ta-image>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="填充模式">
    <div class="exp-image-flex">
      <ta-row :gutter="[16, 16]">
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="scaleToFill"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">scaleToFill</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="aspectFit"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">aspectFit</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="aspectFill"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">aspectFill</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="widthFix"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">widthFix</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image class="exp-image-image" :src="imageUrl" mode="top" :aspect-ratio="1"></ta-image>
          <span class="exp-image-text">top</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="bottom"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">bottom</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="left"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">left</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="right"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">right</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="top left"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">top left</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="top right"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">top right</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="bottom left"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">bottom left</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image
            class="exp-image-image"
            :src="imageUrl"
            mode="bottom right"
            :aspect-ratio="1"
          ></ta-image>
          <span class="exp-image-text">bottom right</span>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="设置宽高比（设置后高度按比例缩放）">
    <div class="exp-image-flex">
      <ta-row :gutter="[16, 16]" align="bottom">
        <ta-col :span="8">
          <ta-image class="exp-image-image" :src="imageUrl" :aspect-ratio="1"></ta-image>
          <span class="exp-image-text">aspect-ratio=1</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image class="exp-image-image" :src="imageUrl" :aspect-ratio="1.5"></ta-image>
          <span class="exp-image-text">aspect-ratio=1.5</span>
        </ta-col>
        <ta-col :span="8">
          <ta-image class="exp-image-image" :src="imageUrl" :aspect-ratio="0.5"></ta-image>
          <span class="exp-image-text">aspect-ratio=0.5</span>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="加载/加载错误">
    <div class="exp-image-flex">
      <ta-row :gutter="[16, 16]">
        <ta-col :span="8">
          <ta-image class="exp-image-image" :aspect-ratio="1"></ta-image>
        </ta-col>
        <ta-col :span="8">
          <ta-image class="exp-image-image" src="error" :aspect-ratio="1"></ta-image>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="自动计算高度">
    <div class="exp-image-flex">
      <ta-row :gutter="[16, 16]">
        <ta-col :span="8">
          <ta-image class="exp-image-image" :src="imageUrl" auto-height></ta-image>
        </ta-col>
        <ta-col :span="8">
          <ta-image class="exp-image-image" auto-height :aspect-ratio="1"></ta-image>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="懒加载">
    <div class="exp-image-flex">
      <ta-row :gutter="[16, 16]">
        <ta-col :span="8">
          <ta-image class="exp-image-image" :src="imageUrl" :aspect-ratio="1" lazy-load></ta-image>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpImage',
  setup() {
    function onError(e: Error) {
      console.error(e)
    }

    return {
      onError,
      imageUrl: 'https://cdn.fox2.cn/vfox/swiper/center-2.jpg'
    }
  }
})
</script>

Import

js
import { TaImage } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { ImageMode, ImageOnLoad } from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
srcstring否图片资源地址
modeImageMode'scaleToFill'否图片裁剪、缩放的模式
aspect-ratioboolean否限制宽高比，设置了该项，只要宽度设定，高度会按造比例显示，如 1 为正方形
lazy-loadbooleanfalse否图片懒加载，在即将进入一定范围(preload=1.3)时才开始加载
auto-heightbooleanfalse否跟原生 img 标签一样，自动计算高度

ImageMode 的合法值

属性说明
scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
top裁剪模式，不缩放图片，只显示图片的顶部区域
bottom裁剪模式，不缩放图片，只显示图片的底部区域
center裁剪模式，不缩放图片，只显示图片的中间区域
left裁剪模式，不缩放图片，只显示图片的左边区域
right裁剪模式，不缩放图片，只显示图片的右边区域
top left裁剪模式，不缩放图片，只显示图片的左上边区域
top right裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right裁剪模式，不缩放图片，只显示图片的右下边区域

Events

事件描述回调函数参数TypeScript 函数
error当错误发生时触发e: Error
load当图片载入完毕时触发payload: { height: number, width: number, src: string }ImageOnLoad