Blazor/Documentation/docusaurus/docs/add-item/image-display.md

sidebar_position	title
8	Image display

We have now added a new item with its image, so it's time to manage it in our table.

Open the Pages/List.razor file and add the highlighted lines:

<DataGrid TItem="Item"
          Data="@items"
          ReadData="@OnReadData"
          TotalItems="@totalItem"
          PageSize="10"
          ShowPager
          Responsive>
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
// highlight-start
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
        <DisplayTemplate>
            <img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
        </DisplayTemplate>
    </DataGridColumn>
// highlight-end
    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).EnchantCategories))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).RepairWith))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
</DataGrid>

Our image is well displayed but on the other hand the images of our false data are not present.

Let's modify the code to take into account the following image as the default image.

Download the image and place it in the wwwroot/images/default.png folder.

Open the Pages/List.razor.cs file and add the highlighted lines:

...

[Inject]
public ILocalStorageService LocalStorage { get; set; }

// highlight-start
[Inject]
public IWebHostEnvironment WebHostEnvironment { get; set; }
// highlight-end

[Inject]
public NavigationManager NavigationManager { get; set; }

...

Open the Pages/List.razor file and edit the highlighted lines:

<DataGrid TItem="Item"
          Data="@items"
          ReadData="@OnReadData"
          TotalItems="@totalItem"
          PageSize="10"
          ShowPager
          Responsive>
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
// highlight-start
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
        <DisplayTemplate>
            @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
            {
                <img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
            }
            else
            {
                <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
            }
        </DisplayTemplate>
    </DataGridColumn>
// highlight-end
    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).EnchantCategories))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).RepairWith))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
</DataGrid>