Aller au contenu principal

8-1 Ajout d'images à une vue

Pour faire référence au dossier wwwroot à partir d'une vue, il est possible d'utiliser le symble ~. Utiliser ce symbole est comme de dire que nous voulons que le chemin d'accès parte de la racine du site, dans le dossier wwwroot.

Par exemple, pour faire référence à une image d'événement, nous pourrions modifier la vue partielle _Evenement.cs comme suit:

Snowfall.Web.Mvc/Views/Evenements/_Evenement.cshtml
@model Evenement

<h2>@Model.Nom</h2>
@if (Model.ImagePath != null)
{
    <img src="~/images/evenements/event1.jpg" alt="Image d'événement" />
}

//...

Ce qui devrait vous donner quelque chose comme ceci:

Imgur

Images dynamiques (lien bd)​

Cependant, nous avons en quelque sorte "hard codé" l'image, alors qu'on doit récupérer son nom via la base de données.

Le chemin vers l'image est contenu dans la propriété ImagePath du modèle Evenement, il est donc possible de faire simplement ceci:

@if (Model.ImagePath != null)
{
    <img src="~/images/evenements/@Model.ImagePath" alt="Image d'événement" />
}
info

Vous pouvez utiliser @ à l'intérieur d'une propriété HTML pour y inclure une variable, incluant une variable provenant du modèle associé à la vue.