image

Image

Shows an image with a loading effect and a placeholder while it loads, and a fallback when it fails, such as a product shot.

States: Default

Parts

Part	File	Does
Image	Image.vue	Shows an image with a loading state and a fallback if it fails to load.
ImageFallback	ImageFallback.vue	Shows a placeholder in place of an image that failed to load.

Anatomy

<Image>
  <ImageFallback />
</Image>

Styling

Part	Recipe
Image	image
Image	image-loading
ImageFallback	image-fallback

Install

Writes 3 files into components/ui/image/. For agents, npx @frontic/ui docs image prints this reference as markdown; the MCP server serves the same.

npm packages: @lucide/vue; class-variance-authority

API reference

Image Image.vue

Shows an image with a loading state and a fallback if it fails to load. Renders a <span>.

Prop	Type	Default
class	ClassValue	—

src	string	—

alt	string	—

loadingEffect	LoadingEffect	'skeleton'

fallbackSrc	string	—

placeholderSrc	string	—

priority	boolean	false

Slot	Slot props
fallback	—

Recipe image	Sets
base: image	2 properties

Recipe image-loading	Sets
effect: skeletondefault	1 property

effect: blur	1 property

ImageFallback ImageFallback.vue

Example