Object Image
Image of a stored object, signed and refreshed with useObjectUrl.
ObjectImage renders an <img> for a private object. It signs an inline URL
with useObjectUrl, which refreshes the URL
before it expires and shares it with other images of the same object.
Preview
Install
Complete UI Setup first: the stylesheet and one
<Toaster />. Then add this component:
import { ObjectImage } from "@dimah-s3/ui";Usage
"use client";
import { ObjectImage } from "@dimah-s3/ui";
export function CoverImage({ coverKey }: { coverKey: string | null }) {
return (
<ObjectImage
route="covers"
objectKey={coverKey}
alt="Album cover"
className="size-40 rounded-md object-cover"
fallback={<div className="bg-muted size-40 rounded-md" />}
/>
);
}alt is required. Pass alt="" when the image is decorative, such as next
to a name that already describes it. Other <img> props pass through.
Fallback
fallback renders in place of the image while there is no key, while the URL
is being signed, when signing fails, and when the image fails to load. It
defaults to nothing. A failed image is not signed again; the next refresh
signs a new URL. Your onError still runs.
The route's server download hooks decide who may read the object, as they do for any download.
Props
import type { ObjectImageProps } from "@dimah-s3/ui";Prop
Type