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.

Examples

Basic example

Simply set the Source attribute and you’re good to go.

<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.

<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.

<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.

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

API

Attributes