Tag Helper Image dans ASP.NET CoreImage Tag Helper in ASP.NET Core

Par Peter KellnerBy Peter Kellner

Le Tag Helper Image améliore la balise <img> afin de fournir un comportement de cache busting pour les fichiers image statiques.The Image Tag Helper enhances the <img> tag to provide cache-busting behavior for static image files.

Une chaîne de cache busting est une valeur unique représentant le hachage du fichier image statique ajouté à l’URL de la ressource.A cache-busting string is a unique value representing the hash of the static image file appended to the asset's URL. 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.The unique string prompts clients (and some proxies) to reload the image from the host web server and not from the client's cache.

Si la source de l’image (src) est un fichier statique sur le serveur web hôte :If the image source (src) is a static file on the host web server:

  • Une chaîne de cache-busting unique est ajoutée en tant que paramètre de requête à la source de l’image.A unique cache-busting string is appended as a query parameter to the image source.
  • 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.If the file on the host web server changes, a unique request URL is generated that includes the updated request parameter.

Pour avoir une vue d’ensemble des Tag Helpers, consultez Tag Helpers dans ASP.NET Core.For an overview of Tag Helpers, see Tag Helpers dans ASP.NET Core.

Attributs de Tag Helper ImageImage Tag Helper Attributes

srcsrc

Pour activer le Tag Helper Image, l’attribut src est obligatoire sur l’élément <img>.To activate the Image Tag Helper, the src attribute is required on the <img> element.

La source de l’image (src) doit pointer vers un fichier statique physique sur le serveur.The image source (src) must point to a physical static file on the server. 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é.If the src is a remote URI, the cache-busting query string parameter isn't generated.

asp-append-versionasp-append-version

Quand asp-append-version est spécifié avec une valeur true et un attribut src, le Tag Helper Image est appelé.When asp-append-version is specified with a true value along with a src attribute, the Image Tag Helper is invoked.

L’exemple suivant utilise un Tag Helper Image :The following example uses an Image Tag Helper:

<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) :If the static file exists in the directory /wwwroot/images/, the generated HTML is similar to the following (the hash will be different):

<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.The value assigned to the parameter v is the hash value of the asplogo.png file on disk. 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é.If the web server is unable to obtain read access to the static file, no v parameter is added to the src attribute in the rendered markup.

Comportement de mise en cache du hachageHash caching behavior

Le Tag Helper Image utilise le fournisseur de cache sur le serveur web local pour stocker le hachage Sha512 calculé d’un fichier donné.The Image Tag Helper uses the cache provider on the local web server to store the calculated Sha512 hash of a given file. Si le fichier est demandé plusieurs fois, le hachage n’est pas recalculé.If the file is requested multiple times, the hash isn't recalculated. Le cache est invalidé par un observateur de fichier qui est associé au fichier quand le hachage Sha512 du fichier est calculé.The cache is invalidated by a file watcher that's attached to the file when the file's Sha512 hash is calculated. Quand le fichier change sur le disque, un nouveau hachage est calculé et mis en cache.When the file changes on disk, a new hash is calculated and cached.

Ressources supplémentairesAdditional resources