LgGridImageColumn

LgGridImageColumn<TItem> displays an image from a URL or a path computed from the bound value.

<Columns Context="item">
    <LgGridImageColumn @bind-Value="item.PictureUrl"
                       Title="#Picture"
                       AlternativeText="#PictureAlt"
                       ImageWidth="48px"
                       ImageHeight="48px" />
</Columns>

• NuGet package: Lagoon.UI.GridView

Common parameters are documented in LgGridBaseColumn.

Specific parameters

Name	Type	Default	Description
AlternativeText	string	null	Alternative text for the image.
ImageHeight	string	"100%"	CSS height of the image.
ImageWidth	string	"100%"	CSS width of the image.
UrlPrefix	string	null	URL prefix, for example "/api/images/".
UrlSuffix	string	null	URL suffix.
Tooltip	string	null	Tooltip displayed on the image.
TooltipIsHtml	bool	false	Indicates whether the tooltip contains HTML.

Usage

Images from a complete or computed URL

GridImageColumnPage.razor

@inherits LgPage

<LgGridView StateId="orders-image-column" Items="_orders" Title="#OrdersGridTitle">
    <Columns Context="item">
        <LgGridImageColumn @bind-Value="item.PictureId"
                           Title="#Picture"
                           AlternativeText="#PictureAlt"
                           UrlPrefix="https://picsum.photos/id/"
                           UrlSuffix="/120/80"
                           ImageWidth="120px"
                           ImageHeight="80px"
                           Tooltip="#OpenPicture" />
        <LgGridImageColumn @bind-Value="item.PictureUrl"
                           Title="#PictureUrl"
                           AlternativeText="#PictureAlt"
                           ImageWidth="48px"
                           ImageHeight="48px" />
    </Columns>
</LgGridView>

UrlPrefix and UrlSuffix surround the bound value to compose a URL; if the value already contains the complete URL, leave them empty.

Filter

No built-in filter.

Complete reference

API sheet generated from the source code: API reference — LgGridImageColumn.

Related components

• LgGridView — the data grid that hosts the column.
• LgGridTextColumn — base column and inherited common parameters.
• LgDocument — display of images and documents protected by authentication.