Image

FREE

Yüklenirken yer tutucu, yumuşak belirme, hata durumunda yedek görünüm, en-boy oranı, alt yazı ve üzerine gelince yakınlaşma.

Kurulum

Terminal

npx @bloxa/cli add image
# or: npx shadcn@latest add @bloxa/image

Yüklenene kadar yer tutucu görünür, sonra görsel yumuşakça belirir.

Görsel yüklenemezse yerelleştirilmiş mesaj ya da kendi içeriğin gösterilir.

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Özellik	Tip	Varsayılan	Açıklama
alt	string	—	Zorunlu açıklama; dekoratif görsellerde "".
ratio	number \| string	—	Çerçevenin en-boy oranı, ör. 16 / 9 veya "4/3".
fit	"cover" \| "contain"	"cover"	Görselin çerçeveye sığma biçimi.
rounded	"none" \| "sm" \| "md" \| "lg" \| "full"	"md"	Köşe yuvarlaklığı.
fallback	ReactNode	—	Yüklenemezse gösterilecek içerik.
caption	ReactNode	—	Alt yazı; figure/figcaption ile sarar.
zoomOnHover	boolean	false	Üzerine gelince hafif yakınlaşma.
frameClassName	string	—	Dış çerçevenin sınıfı (className img'ye gider).