# Image

**Path:** Components/Data Display

[Back to Documentation Index](https://rubicblazor.skyconis.com/docs.md)

---

Image

 RbImage renders image data and image paths as an HTML image.
 Its size is controlled externally with Class or Style .
 It also supports loading state, circular clipping, and image events.

 Supported Sources

 Show code

 Image data 

 File or path 

 Empty Image

 Show code

 Empty 
 DisplayEmptyImage="false" 

 Default fallback 
 DisplayEmptyImage="true" 

 Custom fallback 
 EmptyImageSource="/logo" 

 Object Fit

 Show code

 RbObjectFit.Fill 

 RbObjectFit.Contain 

 RbObjectFit.Cover 

 RbObjectFit.None 

 RbObjectFit.ScaleDown 

 Loading Skeleton

 The endpoint delays the image response for two seconds.
 Use Reload to request it again and display the skeleton.

 Show code

 Loading...

 Reload 

 Options and Interaction

 Show code

 Circular Clipping

 Set ClipCircle to clip the rendered source as a circle.

 ClipCircle="true" 

 Click Event

 When OnClick is assigned, the image becomes clickable.

 Click count: 0 

 ✕

 Contents