104Get started
HextaUI

Aspect ratio: Broken image

When the image fails, the browser’s broken-image glyph is hidden and a fallback icon is shown instead. Pass fallback to replace it, or fallback={null} to show nothing.

Team photo
Team photo
import { IconMoodSad } from "@tabler/icons-react"

import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioBrokenImage() {
  return (
    <div className="grid w-full max-w-md grid-cols-2 gap-3">
      <AspectRatio ratio={4 / 3} className="rounded-lg">
        <img src="/preview/does-not-exist.jpg" alt="Team photo" />
      </AspectRatio>
      <AspectRatio
        ratio={4 / 3}
        className="rounded-lg"
        fallback={
          <span className="flex flex-col items-center gap-1 text-xs">
            <IconMoodSad />
            Couldn’t load
          </span>
        }
      >
        <img src="/preview/does-not-exist.jpg" alt="Team photo" />
      </AspectRatio>
    </div>
  )
}

Add this example

This adds the example as components/examples/aspect-ratio/broken-image.tsx, together with the Aspect ratio component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/aspect-ratio-broken-image.json

To add only the component, follow the Aspect ratio installation.

Props in this example

The Aspect ratio props this example sets, from the API reference.

AspectRatio

PropTypeDefault
ratio
number | `${number}/${number}` | `${number}:${number}`1
fallbackShown when the media fails. null shows nothing.
ReactNode<IconPhotoOff />

Every prop is in the Aspect ratio API reference.

More Aspect ratio examples

See them all, with keyboard support and accessibility notes, on the Aspect ratio page.

Related components