Blazorise Image component

A powerful tool for displaying images on the web.

The Blazorise <Image> component is a flexible and customizable component that can be used to display various types of images, including local images and remote images from external sources. The component allows you to set various attributes such as the image source, alt text, width, and height, and also provides a number of CSS classes to customize the appearance of the image.

One of the key features of the Blazorise image component is its ability to handle different image formats, including JPEG, PNG, SVG, and GIF. Additionally, the component supports lazy loading of images, which improves the performance of the web page by loading images only when they are needed.


Basic example

Simply set the Source attribute and you’re good to go.
A lovely animal...
<Image Source="_content/Blazorise.Docs/assets/img/animals/animal-01.jpg" Text="A lovely animal..." />

Deferred Loading

Add Loading parameter to enable image to dynamically load when you scroll into view.
A lovely animal...
<Image Source="_content/Blazorise.Docs/assets/img/animals/animal-06.jpg" Text="A lovely animal..." Loading />

Fluid image

By enabling Fluid parameter, it forces an image to take up the whole width of its container.
A lovely animal...
<Image Source="_content/Blazorise.Docs/assets/img/animals/animal-02-large.jpg" Text="A lovely animal..." Fluid />

SEO friendly

The parameter Text gives alternate (alt) text for an image, which is good for SEO optimizations.

If you inspect the image with devtools you will be able to see alt assigned.

A lovely animal...
<Image Source="_content/Blazorise.Docs/assets/img/animals/animal-05.jpg" Text="A lovely animal..." />



Name Description Type Default
Source Source attribute is used to find an image that we want to show up. string null
Loading Deffers loading the image until it reaches a calculated distance from the viewport. bool false
Fluid Forces an image to take up the whole width of parent component. bool false
Text Alternative text for image. string null
On this page