---
sidebar_position: 2
title: Affichage des images
---

## Utiliser des images Base64

Les fichiers image ne sont pas la meilleure façon d'enregistrer l'image, dans de nombreuses architectures, l'image est enregistrée dans la base de données.

On modifie le code pour enregistrer l'image dans la base de données ;)

### Mettre à jour le modèle

Ouvrez le modèle d'élément et ajoutez une propriété qui contiendra l'image base64.

```csharp title="Models/Item.cs"
public class Item
{
	public int Id { get; set; }
	public string DisplayName { get; set; }
	public string Name { get; set; }
	public int StackSize { get; set; }
	public int MaxDurability { get; set; }
	public List<string> EnchantCategories { get; set; }
	public List<string> RepairWith { get; set; }
	public DateTime CreatedDate { get; set; }
	public DateTime? UpdatedDate { get; set; }
	// highlight-next-line
	public string ImageBase64 { get; set; }
}
```
```csharp title="Models/ItemModel.cs"
public class ItemModel
{
	...

	// highlight-next-line
	public string ImageBase64 { get; set; }
}
```

### Mettre à jour le service local

Nous allons également modifier le service local pour enregistrer l'image en base64, nous supprimons toute référence pour enregistrer l'image.

Supprimez le code de surbrillance !

```csharp title="Services/DataLocalService.cs"
public async Task Add(ItemModel model)
{
	// Get the current data
	var currentData = await _localStorage.GetItemAsync<List<Item>>("data");

	// Simulate the Id
	model.Id = currentData.Max(s => s.Id) + 1;

	// Add the item to the current data
	currentData.Add(ItemFactory.Create(model));

// highlight-start
	// Save the image
	var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");

	// Check if the folder "images" exist
	if (!imagePathInfo.Exists)
	{
		imagePathInfo.Create();
	}

	// Determine the image name
	var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");

	// Write the file content
	await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
// highlight-end

	// Save the data
	await _localStorage.SetItemAsync("data", currentData);
}

public async Task Update(int id, ItemModel model)
{
	// Get the current data
	var currentData = await _localStorage.GetItemAsync<List<Item>>("data");

	// Get the item int the list
	var item = currentData.FirstOrDefault(w => w.Id == id);

	// Check if item exist
	if (item == null)
	{
		throw new Exception($"Unable to found the item with ID: {id}");
	}

// highlight-start
	// Save the image
	var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");

	// Check if the folder "images" exist
	if (!imagePathInfo.Exists)
	{
		imagePathInfo.Create();
	}

	// Delete the previous image
	if (item.Name != model.Name)
	{
		var oldFileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");

		if (oldFileName.Exists)
		{
			File.Delete(oldFileName.FullName);
		}
	}

	// Determine the image name
	var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");

	// Write the file content
	await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
// highlight-end

	// Modify the content of the item
	ItemFactory.Update(item, model);

	// Save the data
	await _localStorage.SetItemAsync("data", currentData);
}

public async Task Delete(int id)
{
	// Get the current data
	var currentData = await _localStorage.GetItemAsync<List<Item>>("data");

	// Get the item int the list
	var item = currentData.FirstOrDefault(w => w.Id == id);

	// Delete item in
	currentData.Remove(item);

// highlight-start
	// Delete the image
	var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
	var fileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");

	if (fileName.Exists)
	{
		File.Delete(fileName.FullName);
	}
// highlight-end

	// Save the data
	await _localStorage.SetItemAsync("data", currentData);
}
```

### Mettre à jour de la factory

C'est dans la factory que l'on transforme l'image en base64.

Changer le code de la factory :

```csharp title="Factories/ItemFactory.cs"
public static ItemModel ToModel(Item item, byte[] imageContent)
{
	return new ItemModel
	{
		Id = item.Id,
		DisplayName = item.DisplayName,
		Name = item.Name,
		RepairWith = item.RepairWith,
		EnchantCategories = item.EnchantCategories,
		MaxDurability = item.MaxDurability,
		StackSize = item.StackSize,
		ImageContent = imageContent,
// highlight-next-line
		ImageBase64 = string.IsNullOrWhiteSpace(item.ImageBase64) ? Convert.ToBase64String(imageContent) : item.ImageBase64
	};
}

public static Item Create(ItemModel model)
{
	return new Item
	{
		Id = model.Id,
		DisplayName = model.DisplayName,
		Name = model.Name,
		RepairWith = model.RepairWith,
		EnchantCategories = model.EnchantCategories,
		MaxDurability = model.MaxDurability,
		StackSize = model.StackSize,
		CreatedDate = DateTime.Now,
// highlight-next-line
		ImageBase64 = Convert.ToBase64String(model.ImageContent)
	};
}

public static void Update(Item item, ItemModel model)
{
	item.DisplayName = model.DisplayName;
	item.Name = model.Name;
	item.RepairWith = model.RepairWith;
	item.EnchantCategories = model.EnchantCategories;
	item.MaxDurability = model.MaxDurability;
	item.StackSize = model.StackSize;
	item.UpdatedDate = DateTime.Now;
// highlight-next-line
	item.ImageBase64 = Convert.ToBase64String(model.ImageContent);
}
```

### Update the views

Supprimez le code de surbrillance !

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

protected override async Task OnInitializedAsync()
{
	var item = await DataService.GetById(Id);

	var fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/default.png");

// highlight-start
	if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
	{
		fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/{item.Name}.png");
	}
// highlight-end

	// Set the model with the item
	itemModel = ItemFactory.ToModel(item, fileContent);
}
...
```

```cshtml title="Pages/Edit.razor"
...

<p>
	<label>
		Current Item image:
		<img src="data:image/png;base64, @(itemModel.ImageBase64)" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="min-width: 50px; max-width: 150px"/>
	</label>
</p>

...
```

```cshtml title="Pages/List.razor"
...

<DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
	<DisplayTemplate>
		@if (!string.IsNullOrWhiteSpace(context.ImageBase64))
		{
			<img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 150px" />
		}
		else
		{
			<img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
		}
	</DisplayTemplate>
</DataGridColumn>

...
```

## Notion: Base64 Images

Pour comprendre les images base64, commençons par comprendre pourquoi nous en avons besoin.
Les développeurs Web du monde entier essaient actuellement de minimiser les données inhabituelles pour maximiser les performances de leur site Web.
Les performances du site Web peuvent être optimisées en réduisant la taille de la page, le nombre de requêtes, la position des scripts et des feuilles de style et de nombreux autres facteurs affectent la vitesse de la page Web.
La méthode Base64 est utilisée pour minimiser les requêtes du serveur en intégrant des données d'image dans le code HTML.

La méthode Base64 utilise l'URI de données et sa syntaxe est la suivante :


```html title="Base64 Syntax"
data:[<MIMETYPE>][;charset=<CHARSET>][;base64],<DATA>
```

Pour l'intégrer en HTML, vous devez écrire le code de la balise html img comme ceci :

```html title="Base64 image in img TagXHTML"
<img alt="coderiddles" src="data:image/jpg;base64,S)OWE902WEIWUOLKASJODIIWJ9878978JKKJKIWEURU4954590EJ09JT9T99TIR32EQ2EKJDKSDFDNXZCNBAC3SASDASD45ASD5ASD5A4SDASD54DS56DB67V6VBN78M90687LKJKSDFJSDF76F7S7D78F9SDF78S6FSDF9SDFSFSDGFSDFSDLFJSDF7SD86FSDFSDFSDFS8F89SDIFOSDFSFJHKJL" />
```

Nous pouvons facilement convertir des images base64 à l'aide de [outil en ligne](https://www.base64-image.de/).

Nous pouvons également intégrer des images base64 dans la feuille de style (propriété background-image).

```css title="Base64 image inside StylesheetCSS"
.imagediv 
{
    background: url(data:image/jpg;base64,S)OWE902WEIWUOLKASJODIIWJ9878978JKKJKIWEURU4954590EJ09JT9T99TIR32EQ2EKJDKSDFDNXZCNBAC3SASDASD45ASD5ASD5A4SDASD54DS56DB67V6VBN78M90687LKJKSDFJSDF76F7S7D78F9SDF78S6FSDF9SDFSFSDGFSDFSDLFJSDF7SD86FSDFSDFSDFS8F89SDIFOSDFSFJHKJL);
}
```

### Les images Base64 peuvent-elles améliorer les performances ?

Si nous encodons toutes les petites images de nos sites Web, encapsulez-les dans du code css ou html. Cela réduira le nombre de requêtes HTTP car le client (navigateur) n'a pas à émettre de requête distincte pour les images.
Cela augmentera certainement les performances du site Web. Parce que la majeure partie du temps de chargement des pages est consacrée au transfert de données sur Internet. Ne pas le traiter sur le serveur.

**Avantages des images Base64 :**
* Supprime les requêtes HTTP séparées pour le chargement d'images en enveloppant le code d'image codé dans CSS ou HTML.
* Les données encodées d'image peuvent être enregistrées dans la base de données et peuvent générer un fichier image. Juste au cas où nous perdrions la copie du fichier image.

**Inconvénients des images Base64 :**
* Bien que Base64 augmente les performances, mais soyez prudent. Cela augmentera la taille de l'image d'environ 20 à 25 %. que ce qu'il est réellement sous sa forme binaire. Donc, plus de données doivent être transférées sur Internet. Pour les appareils mobiles, c'est un petit inconvénient.
* Même si nous appliquons la compression gzip, cela ne fera que réduire la taille du fichier css à environ 10-12 %.
* IE6 et IE7 ne prennent pas en charge l'URI de données, ce qui signifie que les images base64 ne seront pas chargées dans les navigateurs ie6 et ie7.
* Si vous appliquez l'encodage base64 à de nombreuses images de taille moyenne, cela augmentera la taille du contenu HTML ou la taille du contenu CSS. Le navigateur doit donc faire un aller-retour pour obtenir le contenu complet.
