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" />
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.
If you want to learn ASP.NET Core, I want to personally recommend Programming ASP.NET Core as the best resource out there.