Tag helpers are one of the new features in ASP.NET Core MVC 1.0 and previously I posted about how to use select tag helper in ASP.NET MVC Core 1.0. Image tag helper is an alternative for Html.Image. And in this post, we will see how to use image tag helper in ASP.NET Core MVC 1.0.
Use image tag helper in ASP.NET Core MVC 1.0
It is very simple to use image tag helper. A standard img HTML tag and add new asp-append-version attribute to image tag. That’s it.
<img src="~/images/logo.png" alt="Company Logo" asp-append-version="true" />
What is this asp-append-version attribute? Well, this attribute actually converts simple img tag to image tag helper. This attribute adds a “v” parameter to the image path with a unique hash value of the current image version just like query string. Here is the rendered image tag.
<img src="~/images/logo.png?v=X5q6D366_nQ2fQqUk3URdgWy2ZekXjHzHJaY5yaiOOk"
alt="Company Logo" />
Notice, the asp-append-version attribute is gone but see the “v=X5q6D366_nQ2fQqUk3URdgWy2ZekXjHzHJaY5yaiOOk” added to image path. This is the current image version and whenever the contents of the image change, the value of the parameter will change. This helps in caching the image and this technique is known as cache busting; where browser downloads the resource only when resource is changed.
That’s it.
