Laravel Image Component

Free · MIT

A responsive image that makes you decide what its alt text is.

A Image built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::image>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::image src="/screenshots/orders.png" alt="The orders screen, filtered to unpaid" ratio="16/9" />

See the full API, props and live examples in the Image documentation.

Overview

<x-aura::image> handles the parts of an <img> that are easy to get wrong: the aspect ratio, lazy loading, a fallback when the file is missing, and the alt text.

Props

Prop	Type	Default	Description
`src`	`string\|null`	`null`	Sanitised.
`alt`	`string\|null`	`null`	The description. Required unless `decorative`.
`decorative`	`bool`	`false`	Marks the image as decoration.
`ratio`	`string\|null`	`null`	e.g. `16/9`. Reserves the space so the page does not jump as it loads.
`fit`	`string`	`'cover'`	`cover`, `contain`, `fill`, `none`.
`rounded`	`string`	`'md'`	`none`, `sm`, `md`, `lg`, `full`.
`caption`	`string\|null`	`null`	Rendered as a real `<figcaption>`.
`lazy`	`bool`	`true`	`loading="lazy"` and `decoding="async"`.
`fallback`	`string\|null`	`null`	Swapped in when the source fails to load.