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

Fallback image

By setting the FallbackSource parameter, you can set an fallback image that will be displayed when loading of the Source fails.

<Image Source="data:image/png;base64,invalid" FallbackSource="_content/Blazorise.Docs/assets/img/animals/animal-06.jpg" Text="Fallback animal image" />

Best Practices

Alternative Text

Alternative text should concisely communicate the image's purpose. Use an empty alternative for decorative images so assistive technology can skip them instead of announcing redundant information.

Loading and Layout

Reserve image dimensions or an aspect ratio to prevent surrounding content from shifting while the source loads. Defer off-screen images, but load prominent above-the-fold content normally. Optimize the source file and responsive sizes as well, because a fluid component cannot make an unnecessarily large download efficient.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Image />