Image

Image is a lightweight wrapper around the native HTML <img> element. It provides sensible responsive defaults while forwarding standard image attributes such as loading, width, height, and decoding.

Usage

<template>
  <Image
    src="/images/hero.jpg"
    alt="Mountain landscape at sunrise"
  />
</template>

<script setup lang="ts">
import { Image } from '@/Components/Image'
</script>

Props

Prop	Type	Required	Description
src	string	Yes	The image URL or path.
alt	string	No	Alternative text for the image. Defaults to "Image" when omitted.

Styling

The component includes these Tailwind CSS classes by default:

h-auto w-full select-none object-contain

Pass a class attribute to add classes or override the defaults. For example, use object-cover with a fixed aspect ratio to crop the displayed image.

<Image
  src="/images/profile.jpg"
  alt="Profile photo"
  class="aspect-square rounded-full object-cover"
/>

Native image attributes

All standard <img> attributes, except class, are forwarded to the rendered image. This is useful for browser-level loading and sizing controls.

<Image
  src="/images/product.jpg"
  alt="Ceramic vase"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
/>

For images that are only decorative, use an empty alt value:

<Image src="/images/divider.svg" alt="" />