Skip to content

Image 图片

可预览的图片。

何时使用

  • 需要展示图片时使用。
  • 需要惰性加载时使用,当图片不再可视区范围之内不会加载图片

代码演示

案例一

图片预览
vue
<script setup lang="ts">
import { Image } from '@/library';
import img1 from '@/assets/images/1.jpg';
</script>

<template>
  <Image :src="img1" alt="图片预览" style="max-width: 200px; max-height: 200px" />
</template>
<script setup lang="ts">
import { Image } from '@/library';
import img1 from '@/assets/images/1.jpg';
</script>

<template>
  <Image :src="img1" alt="图片预览" style="max-width: 200px; max-height: 200px" />
</template>

案例二(图片加载完成之前展示的样式)

Image API

propNamedescriptiontypedefault value
src要展示的图片 urlstring-
其他其他任何属性将直接透传递给 Image 组件的根节点--

Released under the MIT License.