---
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"
// highlight-start
.png "@context.DisplayName")
// highlight-end
@(string.Join(", ", ((Item)context).EnchantCategories))
@(string.Join(", ", ((Item)context).RepairWith))
```
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:
```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"
// highlight-start
@if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
{
}
else
{
}
// highlight-end
@(string.Join(", ", ((Item)context).EnchantCategories))
@(string.Join(", ", ((Item)context).RepairWith))
```