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

---
sidebar_position: 8
title: 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:

```cshtml title="Pages/List.razor"
<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.

![Image par défaut](/img/ajouter-item/default.png)

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

![Image par défaut](/img/ajouter-item/default-image.png)

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

```csharp title="Pages/List.razor.cs"
...

[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:

```cshtml title="Pages/List.razor"
<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>
```