Blazorise Image component
A powerful tool for displaying images on the web.
<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 exampleSimply set the
Sourceattribute and you’re good to go.
<Image Source="_content/Blazorise.Docs/assets/img/animals/animal-01.jpg" Text="A lovely animal..." />
Loadingparameter 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 imageBy enabling
Fluidparameter, 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 />
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
<Image Source="_content/Blazorise.Docs/assets/img/animals/animal-05.jpg" Text="A lovely animal..." />
||Source attribute is used to find an image that we want to show up.||
||Deffers loading the image until it reaches a calculated distance from the viewport.||
||Forces an image to take up the whole width of parent component.||
||Alternative text for image.||