---
sidebar_position: 8
title: Affichage de l'image
---

Nous avons maintenant ajouter un nouvel item avec son image, il est alors temps de gérer celle-ci dans notre tableau.

Ouvrez le fichier `Pages/List.razor` et ajouter les lignes en surbrillances :

```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>
```

Notre image est bien afficher mais par contre les images de nos fausses données elle ne sont présente.

Modifions le code afin de prendre en compte l'image suivante en image par défaut.

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

Télécharger l'image et placer la dans le dossier `wwwroot/images/default.png`.

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

Ouvrez le fichier `Pages/List.razor.cs` et ajouter les lignes en surbrillances :

```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; }

...
```

Ouvrez le fichier `Pages/List.razor` et modifier les lignes en surbrillances :

```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>
```