Image Tag Helper in ASP.NET Core

In this article, I am going to discuss the Image Tag Helper in ASP.NET Core MVC Application with some examples. Please read our previous article, where we discussed the basics of Tag Helpers in ASP.NET Core MVC Application. As part of this article, we are going to discuss the following pointers. As part of this article, we are going to discuss the following pointers.

1. Understanding the Browser Cache
2. How to Disable Browser Cache?
3. Why we need Image Tag Helper in ASP.NET Core?
4. How to use Image Tag Helper in ASP.NET Core?
5. Understanding ASP.NET Core Image Tag Helper with an example
6. How Does the Image Tag Helper work in ASP.NET Core?

Understanding the Browser Cache:
In general, when you visit a web page and if that web page contains some image, then most of the modern web browser cache the images for later use. In the future, when you revisit that web page, then the browser loads the images from the cache instead of downloading the images from the server. In most of the caches, this is not an issue as the images are not changes that often for a web page.

How to Disable Browser Cache?
If you want then you can also disable the browser cache. Once you disable the browser cache then it will not cache the images and each and every time it will download the images from the server when you visit the page. In order to disable browser cache in Google Chrome, you need to follow the below steps.

Press the F12 key to launch the Browser Developer Tools. Then click on the “Network” tab and finally, check then “Disable Cache” checkbox as shown in the below image.

Why we need Image Tag Helper in ASP.NET Core?
If you disable the browser cache, then each and every time it will download the image from the server. If you didn’t disable the browser cache, then it will serve the image from the browser cache. But the problem with this approach is that, if you changed the image, then you will not get the updated image.

To overcome the above problems, i.e. download the image from the server only when it has changed else serve the image from the browser cache, we need to use the Image Tag helper in ASP.NET Core MVC Application.

How to use Image Tag Helper in ASP.NET Core?
In order to use the Image Tag Helper in ASP.NET Core Application, you need to add the asp-append-version attribute to the <img> tag and need to set the value to true as shown below.

Understanding ASP.NET Core Image Tag Helper with an example:
First, create a folder with the name images within the wwwroot folder. Once you create the images folder, add two images with the name Image1.jpg and Image2.jpg. For better understanding add two different images.

Modify the Home Controller as shown below.

using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCApplication.Controllers
{
    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            return View();
        }
    }
}

Modify the Index View as shown below.

@{
    ViewBag.Title = "Index";
    Layout = null;
}
<img src="~/images/Image1.jpg" asp-append-version="true" />

Modify the _ViewImports.cshtml file as shown below.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

With the above changes in place, now run the application and view the page source code. Once you view the page source code, you will find the following code for the image tag.

How Does the Image Tag Helper work in ASP.NET Core?
The ASP.NET Core Image Tag Helper enhances the tag to provide cache-busting behavior for the static image files. That means based on the content of the image, a unique hash value is calculated and then appended to the image URL as you can see in the above image. This unique hash value decides whether to load the image from the server or to load the image from the browser cache. If the hash value changes then it will reload the image from the server else it will reload the image from the cache.

Now reload the page multiple times and you will see the hash is not going to change and hence it will load the image from the browser cache.

Now, rename Image1 as Image3 and Image2 as Image1 within the images folder and reload the page and you will see a different hash value as well as the updated image which proofs that it loads the image from the server.

In the next article, I am going to discuss the Environment Tag Helper in ASP.NET Core MVC Application. Here, in this article, I try to explain Image Tag Helper in ASP.NET Core MVC Application with some examples. I hope you enjoy this article.

Summary:
I hope this post will be helpful to understand the concept of Image Tag Helper in ASP.NET Core
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉