Image

Image component is a container for responsive images.

API Documentation
NOTE: All images are taken from the Bulma image docs page.

How it works #

The Image component provides a simple way to display images in your Blazor application, supporting Bulma's responsive image container styles.

How to use:
  1. Add the Image component to your page.
  2. Set the Src property to the image URL or static asset you want to display.
  3. Optionally, use the Dimension property to control the image size (e.g., ImageDimension.Is128x128).
This demo shows the basic usage of the Image component with a static image source and a fixed dimension. 
<Image Src="@DemoStringConstants.StaticAssets_Images_Placeholders_128x128_png"
       Dimension="ImageDimension.Is128x128" />

Fixed square images #

The Image component supports a range of fixed square sizes, making it easy to maintain consistent layouts for avatars, icons, or thumbnails.

How to use:
  1. Use the Image component for each image you want to display.
  2. Set the Dimension property to one of the predefined square sizes (e.g., Is16x16, Is24x24, Is32x32, etc.).
  3. Provide the Src property with the image source.
This demo illustrates how to render images at various fixed square sizes for consistent presentation. 






<Image Dimension="ImageDimension.Is16x16" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_16x16_png" />
<br />
<Image Dimension="ImageDimension.Is24x24" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_24x24_png" />
<br />
<Image Dimension="ImageDimension.Is32x32" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_32x32_png" />
<br />
<Image Dimension="ImageDimension.Is48x48" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_48x48_png" />
<br />
<Image Dimension="ImageDimension.Is64x64" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_64x64_png" />
<br />
<Image Dimension="ImageDimension.Is96x96" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_96x96_png" />
<br />
<Image Dimension="ImageDimension.Is128x128" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_128x128_png" />

Rounded images #

The Image component can display images with rounded (circular) borders, ideal for profile pictures or avatars.

How to use:
  1. Add the Image component to your page.
  2. Set the Dimension property to the desired size (e.g., Is128x128).
  3. Set IsRounded="true" to apply a circular style to the image.
  4. Provide the Src property with the image source.
This demo shows how to create a perfectly rounded image using the IsRounded property. 
<Image Dimension="ImageDimension.Is128x128"
       IsRounded="true" 
       Src="@DemoStringConstants.StaticAssets_Images_Placeholders_128x128_png" />

Responsive images with ratios #

The Image component supports responsive aspect ratios, allowing images to scale while maintaining a consistent width-to-height ratio.

How to use:
  1. Add the Image component inside a container with a fixed width (e.g., using a div with a style attribute).
  2. Set the Ratio property to the desired aspect ratio (e.g., Is16by9, Is4by3, Is1by1, etc.).
  3. Provide the Src property with the image source.
This demo demonstrates how to use different aspect ratios to create responsive images that adapt to their container's width. 
<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.IsSquare" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_480x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is1by1" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_480x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is5by4" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_600x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is4by3" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_640x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by2" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_480x320_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is5by3" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_800x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is16by9" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_640x360_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is2by1" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_640x320_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by1" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_720x240_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is4by5" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_480x600_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by4" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_480x640_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is2by3" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_320x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by5" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_480x800_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is9by16" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_360x640_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is1by2" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_320x640_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is1by3" Src="@DemoStringConstants.StaticAssets_Images_Placeholders_240x720_png" /></div>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!