cnc-thumbnail
A small square image with a built-in fallback: when there is no src it draws an
icon instead of a broken picture. Its size comes from the element, not from a property.
Quick start
Give it a src, an alt and a size on the element. The image is
object-contain, so a non-square picture is letterboxed rather than cropped.
The second has no src and falls back to its icon.
<cnc-thumbnail
class="block h-20 w-20 rounded-lg border"
src="https://example.com/photo.jpg"
alt="A sample thumbnail"
></cnc-thumbnail>Usage guidance
Set icon to match what is MISSING. The default says "no image", which is right for
a gallery and vague everywhere else — a person outline for an absent avatar or a document
for an absent file preview tells the user what should have been there.
Reach for cnc-avatar for people. It handles initials, grouping and status on top of
the same idea, and a round cnc-thumbnail is a worse version of it.
The fallback covers an EMPTY src, not a failing one. A URL that returns 404 renders as a broken image, since nothing listens for the error — so where a source may be dead rather than absent, clear it in your own state and let the fallback do its job.