Image

Image renders accessible img, picture, and source primitives.

github.com/fastygo/templ/ui

Summary

Image renders accessible img, picture, and source primitives.Use Decorative for purely visual images.

Use Cases

Render product screenshots, avatars, logos, and thumbnails

Render responsive image sources with picture

Semantics

Decorative images render an empty alt and aria-hidden true

Image defaults to loading lazy and decoding async

Example variant.avatar

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Image(ui.ImageProps{Variant: "avatar", Size: "md", Src: "/avatar.png", Alt: "User avatar"})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Image(ui.ImageProps{Variant: "avatar", Size: "md", Src: "/avatar.png", Alt: "User avatar"})
}

Example layout.picture

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Picture(ui.PictureProps{}) {
		@ui.Source(ui.SourceProps{SrcSet: "/hero.webp", Type: "image/webp"})
		@ui.Image(ui.ImageProps{Variant: "rounded", Src: "/hero.jpg", Alt: "Hero image"})
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Picture(ui.PictureProps{}) {
		@ui.Source(ui.SourceProps{SrcSet: "/hero.webp", Type: "image/webp"})
		@ui.Image(ui.ImageProps{Variant: "rounded", Src: "/hero.jpg", Alt: "Hero image"})
	}
}

API

Aspect · string — role: aspect-ratio; enum: auto|square|video; default: auto

Decorative · bool — role: accessibility

Fit · string — role: object-fit; enum: contain|cover|fill|none|scale-down; default: cover

Size · string — role: density; enum: auto|default|xs|sm|lg|xl|full; default: auto; source: ui.image.ImageVariants