Image
The Image component is used to display images and supports various fitting modes. Below is an example of how to use the Image component.
Usage Example
fill
FAILED
contain
FAILED
cover
FAILED
none
FAILED
scale-down
FAILED
在 github 中打开
展开代码
复制代码
<template>
<div class="flex gap-4">
<div v-for="fit in ['fill', 'contain', 'cover', 'none', 'scale-down']" :key="fit" class="flex flex-col items-center gap-4">
<span>{{ fit }}</span>
<ol-image class="w-100px h-100px" :fit="fit" src="https://i.postimg.cc/sx8CQcYj/pexels-photo-1108099.jpg" />
</div>
</div>
</template>
Default Slot
The OlImage component supports a default slot, allowing customization of the display content in error states.
FAILED
在 github 中打开
展开代码
复制代码
<template>
<div class="flex gap-4">
<ol-image />
<ol-image>
<template #error>
<OlIcon icon="i-mi-image" />
</template>
</ol-image>
</div>
</template>
Lazy Loading
The OlImage component supports lazy loading. By setting the loading attribute to 'lazy', images are loaded only when they enter the viewport, improving page performance.
在 github 中打开
展开代码
复制代码
<script setup>
const urls = [
'https://i.postimg.cc/50sV11jF/pexels-photo-128302.jpg',
'https://i.postimg.cc/NMDgMmCF/pexels-photo-611328.jpg',
'https://i.postimg.cc/sx8CQcYj/pexels-photo-1108099.jpg',
'https://i.postimg.cc/W4nR6jGf/cow-pasture-animal-almabtrieb.jpg',
'https://i.postimg.cc/6QjKxt84/pexels-photo-2416581.jpg',
'https://i.postimg.cc/BQTGQx80/pexels-photo-19302257.jpg',
'https://i.postimg.cc/Gtv6tCmQ/pexels-photo-29687479.jpg',
]
</script>
<template>
<ol-scrollbar class="w-full h-lg">
<ol-image v-for="url in urls" :key="url" class="w-auto h-370px" fit="contain" loading="lazy" :src="url" />
</ol-scrollbar>
</template>
Attributes
| Attribute Name | Description | Type | Default Value |
|---|---|---|---|
| src | Image source URL | string | - |
| fit | Image fit mode | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 'fill' |
| loading | Image loading mode | 'eager' | 'lazy' | 'eager' |
| alt | Image alt text | string | - |
Slots
| Slot Name | Description |
|---|---|
| error | Content displayed when image fails to load |
| placeholder | Content displayed while image is loading |