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
propName | description | type | default value |
---|---|---|---|
src | 要展示的图片 url | string | - |
其他 | 其他任何属性将直接透传递给 Image 组件的根节点 | - | - |