TUI

<template>
  <div class="component-card-demo-wrap image-demo-base">
    <TsImage width="120px" height="200px" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
    <TsImage width="200px" src="" fallback="根本没请求接口" />
  </div>
</template>

<script setup lang="ts">
import { TsImage } from 'tui';
</script>

<style scoped>
.image-demo-base {
  width: 600px;
  height: 200px;
}
</style>

<template>
  <div class="component-card-demo-wrap image-demo-size">
    <TsImage :width="60" />
    <TsImage :width="120" :height="80" :error="true" />
    <TsImage border-radius="5px" :width="128" :height="128" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  </div>
</template>

<script setup lang="ts">
import { TsImage } from 'tui';
</script>

<style scoped>
.image-demo-size {
  align-items: flex-end;
}
</style>

<template>
  <div class="component-card-demo-wrap image-demo-fit">
    <TsImage :width="80" :height="80" fit="cover" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
    <TsImage :width="80" :height="80" fit="contain" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
    <TsImage :width="80" :height="80" fit="fill" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  </div>
</template>

<script setup lang="ts">
import { TsImage } from 'tui';
</script>

<style scoped>
.image-demo-fit {
  align-items: flex-end;
}
</style>

<template>
  <div class="component-card-demo-wrap image-demo-expand">
    <TsImage :width="80" :height="80" bg="#eee" />
    <TsImage :width="80" :height="80" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
    <TsImage
      :width="80"
      :height="80"
      lazy
      placeholder="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
      src="https://www.timeszit.cn/tms/file?filename=articleCover2025-03-24-15-53-47SNkwc.jpg"
    />
  </div>
</template>

<script setup lang="ts">
import { TsImage } from 'tui';
</script>

<style scoped>
.image-demo-expand {
  align-items: flex-end;
}
</style>

<template>
  <div class="component-card-demo-wrap image-demo-preload">
    <TsImage :width="80" :height="80" src="https://example.invalid/not-found.jpg" />
    <TsImage :width="80" :height="80" :preloadMode="false" src="https://example.invalid/not-found.jpg" />
    <TsImage :width="80" :height="80" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  </div>
</template>

<script setup lang="ts">
import { TsImage } from 'tui';
</script>

<style scoped>
.image-demo-preload {
  align-items: flex-end;
}
</style>