<script setup lang="ts">
import { Image } from '@/components/ui/image'
</script>
<template>
<div class="flex flex-wrap items-center gap-6">
<Image
src="https://picsum.photos/seed/frontic-1/400/300"
alt="Demo product"
class="h-48 w-64 rounded-lg"
/>
<Image
src="https://picsum.photos/seed/frontic-2/400/300"
alt="Demo product"
class="h-48 w-64 rounded-lg"
/>
</div>
</template>Installation
Usage
<script setup lang="ts">
import { Image } from '@/components/ui/image'
</script>
<template>
<Image
src="/product.jpg"
alt="Product photo"
class="h-64 w-full rounded-lg"
/>
</template>The Image component wraps a native <img> element and adds two behaviors: a loading effect while the image loads, and a fallback when loading fails. All native img attributes are forwarded via $attrs.
Loading Effects
Skeleton
The default loading effect shows an animated pulse placeholder until the image loads.
<script setup lang="ts">
import { Image } from '@/components/ui/image'
</script>
<template>
<div class="flex flex-wrap items-center gap-6">
<Image
src="https://picsum.photos/seed/frontic-skeleton/400/300"
alt="Skeleton loading"
loading-effect="skeleton"
class="h-48 w-64 rounded-lg"
/>
</div>
</template>Blur
A blur effect that fades away once the image finishes loading.
<script setup lang="ts">
import { Image } from '@/components/ui/image'
</script>
<template>
<div class="flex flex-wrap items-center gap-6">
<Image
src="https://picsum.photos/seed/frontic-blur/400/300"
alt="Blur loading"
loading-effect="blur"
class="h-48 w-64 rounded-lg"
/>
</div>
</template>Error Fallback
Default Fallback
When an image fails to load and no fallback-src is provided, a placeholder icon is shown. You can override it with the fallback slot.
<script setup lang="ts">
import { Image } from '@/components/ui/image'
</script>
<template>
<div class="flex flex-wrap items-center gap-6">
<Image
src="https://invalid-url-that-will-fail.test/image.jpg"
alt="Broken image"
class="h-48 w-64 rounded-lg"
/>
</div>
</template>Fallback Source
Provide a fallback-src prop to load an alternative image when the primary source fails.
<script setup lang="ts">
import { Image } from '@/components/ui/image'
</script>
<template>
<div class="flex flex-wrap items-center gap-6">
<Image
src="https://invalid-url-that-will-fail.test/image.jpg"
alt="Fallback source"
fallback-src="https://picsum.photos/seed/frontic-fallback/400/300"
class="h-48 w-64 rounded-lg"
/>
</div>
</template>Props
All other attributes are forwarded to the native <img> element.
Slots
API Reference
Image
The root wrapper that manages loading state and error handling.
ImageFallback
Default fallback content shown when an image fails to load. Displays an ImageOff icon from lucide-vue-next.