Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Image Placeholder

Image Placeholder is a simple SVG placeholder for a place where an image should appear. Use it when an image is still loading, missing, unavailable, or failed to load, and the layout still needs to keep the same size.

The component does not load images, handle upload state, or manage errors. It only renders a visual placeholder inside the size you give it. Use it in image cards, media grids, upload slots, attachment previews, product thumbnails, gallery cells, and banner or image preview areas.

Do not use Image Placeholder for full empty states, skeleton loading, progress indicators, image viewing, crop or resize tools, upload dropzones, or user and team identity fallbacks. Use EmptyState, Skeleton, ProgressSpinner, ImageViewer, Crop, ImageResizer, Upload, or Avatar for those cases.

The NgStarter Angular Image Placeholder component lets you render a simple SVG placeholder inside an image slot when the real image is not available yet. Use for image cards, media grids, upload slots, attachment previews, product thumbnails, gallery cells, banner areas, and image preview areas when an image is loading, missing, unavailable, or failed to load and the layout should keep a stable size. It includes examples for Basic image placeholder.

Give Image Placeholder a stable width, height, or aspect ratio with Tailwind classes so the image area does not jump while real media loads or when no image is available.