Tag Helper Image dans ASP.NET Core

  • Article

Par Peter Kellner

Le Tag Helper Image améliore la balise <img> afin de fournir un comportement de cache busting pour les fichiers image statiques.

Une chaîne de cache busting est une valeur unique représentant le hachage du fichier image statique ajouté à l’URL de la ressource. La chaîne unique invite les clients (et certains proxys) à recharger l’image depuis le serveur web hôte et non depuis le cache du client.

Si la source de l’image (src) est un fichier statique sur le serveur web hôte :

  • Une chaîne de cache-busting unique est ajoutée en tant que paramètre de requête à la source de l’image.
  • Si le fichier sur le serveur web hôte change, une URL de demande unique qui inclut le paramètre de demande mis à jour est générée.

Pour obtenir une vue d’ensemble des Tag Helpers, consultez Tag Helpers dans ASP.NET Core.

Attributs de Tag Helper Image

src

Pour activer le Tag Helper Image, l’attribut src est obligatoire sur l’élément <img>.

La source de l’image (src) doit pointer vers un fichier statique physique sur le serveur. Si la source src est un URI distant, le paramètre de la chaîne de requête de cache-busting n’est pas généré.

asp-append-version

Quand asp-append-version est spécifié avec une valeur true et un attribut src, le Tag Helper Image est appelé.

L’exemple suivant utilise un Tag Helper Image :

<img src="~/images/asplogo.png" asp-append-version="true">

Si le fichier statique existe dans le répertoire /wwwroot/images/, le code HTML généré est semblable au suivant (le hachage sera différent) :

<img src="/images/asplogo.png?v=Kl_dqr9NVtnMdsM2MUg4qthUnWZm5T1fCEimBPWDNgM">

La valeur affectée au paramètre v est la valeur de hachage du fichier asplogo.png sur le disque. Si le serveur web ne peut pas obtenir l’accès en lecture au fichier statique, aucun paramètre v n’est ajouté à l’attribut src dans le balisage affiché.

Pour qu’un Tag Helper génère une version pour un fichier statique en dehors de wwwroot, consultez Servir des fichiers à partir de plusieurs emplacements

Comportement de mise en cache du hachage

Le Tag Helper Image utilise le fournisseur de cache sur le serveur web local pour stocker le hachage Sha512 calculé d’un fichier donné. Si le fichier est demandé plusieurs fois, le hachage n’est pas recalculé. Le cache est invalidé par un observateur de fichier qui est associé au fichier quand le hachage Sha512 du fichier est calculé. Quand le fichier change sur le disque, un nouveau hachage est calculé et mis en cache.

Ressources supplémentaires