Image Tag Helper in ASP.NET Core

Back to: ASP.NET Core Tutorials For Beginners and Professionals

Image Tag Helper in ASP.NET Core MVC Application

In this article, I will discuss the Image Tag Helper in ASP.NET Core MVC Web Application with Examples. Please read our previous article, discussing the basics of Tag Helpers in ASP.NET Core MVC Application. As part of this article, we will discuss the following pointers. As part of this article, we will discuss the following pointers.

1. What is Browser Cache?
2. What is the Location of Browser Cache in Google Chrome?
3. How to Disable Browser Cache?
4. Why do we need an Image Tag Helper in ASP.NET Core?
5. What is Image Tag Helper in ASP.NET Core MVC?
6. What is the Cache-Busting Behavior of Image Tag Helper in ASP.NET Core MVC?
7. How Do We Use Image Tag Helper in ASP.NET Core MVC?
8. How Does the Image Tag Helper Work in ASP.NET Core?
9. Benefits of Cache-Busting in Image Tag Helper

What is Browser Cache?

Browser Cache is a mechanism used by web browsers to store (cache) web files, such as HTML pages, CSS files, JavaScript files, and images on a user’s device. The purpose of browser caching is to reduce the loading time of web pages by retrieving cached files instead of downloading them again from the server on every request (from the second request onwards). This improves performance and reduces server load but can sometimes lead to outdated content being displayed.

What is the Location of Browser Cache in Google Chrome?

The location of the browser cache in Google Chrome varies depending on the operating system you are using. The following are the default locations where Chrome stores its cache files:

Windows

On Windows, Chrome’s cache files are stored in the following directory: C:\Users\[Your User Name]\AppData\Local\Google\Chrome\User Data\Default\Cache. Please replace [Your User Name] with your actual Windows username. The AppData folder is hidden by default, so you may need to enable viewing of hidden files to access it.

macOS

On macOS, the Chrome cache is located at: /Users/[Your User Name]/Library/Caches/Google/Chrome/Default/. Please replace [Your User Name] with your actual macOS username. The Library folder is hidden by default, so you may need to use the Go to Folder feature in Finder (press Cmd + Shift + G and enter the path) to access it.

Linux

On Linux, the Chrome cache is located at: /home/[Your User Name]/.cache/google-chrome/Default/. Please replace [Your User Name] with your actual Linux username. The .cache directory is hidden, so you may need to show hidden files in your file manager to see them (press Ctrl + H in most file managers).

How to Disable Browser Cache?

To disable the browser cache in Google Chrome, follow the steps below.

• Open Browser Developer Tool: First, run the application and then navigate to the page. Then press the F12 key to launch the Browser Developer Tools.
• Open Network Tab: In the Browser Developer Tools window, click the “Network” tab at the top.
• Disable Cache: Please Check the “Disable cache” check box, which appears just below the Network tab options. This will prevent Chrome from using the browser cache.

For a better understanding, please look at the following image:

Note: Once you disable the browser cache, the web resources like Images, CSS files, and JavaScript files will not be cached; instead, they will be downloaded from the server each time you visit the page. 

Why do we need an Image Tag Helper in ASP.NET Core?

If we disable the browser cache, it will download the image from the web server each time. If we enable the browser cache, it will serve the image from the browser cache. However, the problem with this approach is that if we change the image in the web server, we will not get the updated image if the browser cache is enabled.

So, we need to find a solution, i.e., download the image from the web server only when it has changed, or else serve the image from the browser cache. The solution is the Image Tag helper in the ASP.NET Core MVC Application. The Image Tag Helper enhances the <img> tag to provide cache-busting behavior for static image files.

What is Image Tag Helper in ASP.NET Core MVC?

The Image Tag Helper in ASP.NET Core MVC simplifies the process of generating <img> elements for displaying images on your web pages, working with <img> elements in Razor views. It helps render image URLs correctly by automatically resolving paths and versioning images, which is useful when dealing with dynamic content. This allows us to handle images efficiently, with features like cache busting (automatically appending version numbers to image URLs when files change). 

What is the Cache-Busting Behavior of Image Tag Helper in ASP.NET Core MVC?

The Cache-Busting is a technique used to force the browser to load the latest version of a file (such as an image, CSS, or JavaScript) instead of serving the cached version. This is important because browsers often cache static files to improve performance by not downloading the same resource repeatedly. However, when these static files are updated (e.g., an image is changed), the cached version may still be served, causing users to see outdated content.

In ASP.NET Core MVC, the Image Tag Helper supports Cache-Busting behavior, which ensures that the browser fetches the latest version of an image when it has changed. When using the Image Tag Helper, cache-busting is typically achieved by appending a version query string to the image URL, which changes whenever the file is updated. The version string is based on the file’s content, such as its last modification date or a hash of its content.

For example: <img asp-src=”~/images/logo.png” />. If cache-busting is enabled, the rendered HTML might look like this: <img src=”/images/logo.png?v=637234567890123456″ />. Here, the v=637234567890123456 part is the cache-busting query string. This value changes when the underlying file changes, effectively making the browser treat it as a new resource and causing it to fetch the updated version.

How Do We Use Image Tag Helper in ASP.NET Core MVC?

The primary usage of the Image Tag Helper is similar to the regular HTML <img> tag, but it allows you to specify the image source using the src attribute. The general syntax is: <img src=”~/images/Image1.jpg” alt=”My Image” />

Cache-Busting:
One of the benefits of Image Tag Helper is that it can automatically append a cache-busting query string to the image URL. This ensures that browsers fetch the latest version of the image when it has been updated on the server. The syntax is: <img src=”~/images/Image1.jpg” asp-append-version=”true” />. Here, the asp-append-version=”true” attribute will add a query string based on the image’s last modified timestamp, ensuring that the URL changes when the image changes.

Width and Height Attributes:
You also can specify the image’s dimensions using the width and height attributes. This helps improve page loading performance by indicating the image dimensions to the browser before the image is fully loaded. The syntax is: <img src=”~/images/Image1.jpg” asp-append-version=”true” width=”200″ height=”150″ />

Additional Attributes:
The Image Tag Helper supports other attributes that you might want to use with the <img> tag, such as class, style, alt, and more. The syntax is: <img src=”~/images/Image1.jpg” alt=”My Image” asp-append-version=”true” width=”200″ height=”150″ class=”img-thumbnail” style=”border: 1px solid #ccc;” />

Using Model Binding:
You can also use the Image Tag Helper with model binding. If your view model has an image property, you can bind it directly to the src attribute. Assuming your view model has a property named ImageUrl: <img asp-src=”@Model.ImageUrl” alt=”My Image” asp-append-version=”true” width=”200″ height=”150″ class=”img-thumbnail” style=”border: 1px solid #ccc;” />. In this case, the asp-src attribute binds to your model’s ImageUrl property, generating the appropriate src attribute.

Understanding ASP.NET Core Image Tag Helper With an Example:

Let us understand the Image Tag helper in ASP.NET Core MVC with an example. First, create a folder with the name images within the wwwroot folder of your application. Once you create the images folder, add the following images with the names Image1.jpg and Image2.jpg. For better understanding, add two different images, as shown in the below image.

Once you add the above two images, your wwwroot folder should look as shown below.

Modifying Home Controller:

Next, modify the Home Controller as shown below. We have modified the HomeController to use the Index Action method, which returns a View.

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

Modifying Index View:

Next, modify the Index View as shown below. Here, we have only the img tag, which loads the image Image1.jpg from the images folder. Along with the src attribute, where we set the path of the image, we have also used the asp-append-version attribute and set its value to true.

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<img src="~/images/Image1.jpg" asp-append-version="true" />

With the above changes in place, run the application, and you should get the output as expected, as shown in the image below. Next, right-click on the page and then click on view the page source, as shown in the image below.

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 <img> tag to provide cache-busting behavior for static image files. Based on the image’s content, a unique hash value is calculated and then appended to the image URL, as shown in the above image. This unique hash value decides whether to load the image from the server or the browser cache. If the hash value changes, it will reload the image from the server; otherwise, it will reload the image from the cache. Now, reload the page multiple times, and you will see the hash will not change; hence, it will load the image from the browser cache.

Now, rename Image1 as Image3 and Image2 as Image1 within your application’s images folder and reload the page. You will see a different hash value and the updated image, proving that it loads the image from the server, as shown in the image below.

Benefits of Cache-Busting in Image Tag Helper

The following are the Benefits of Cache-Busting in Image Tag Helper:

• Ensure Fresh Content: Cache-busting ensures that users always receive the latest version of images, even if their browser has cached an older version.
• Automatic Versioning: The Image Tag Helper automatically appends a version number based on the file’s timestamp or content hash, so developers don’t have to manage it manually.
• Improved User Experience: Users get the most up-to-date visual content, especially for websites with frequently changing images, logos, or other visual elements.

In the next article, we will discuss the Environment Tag Helper in ASP.NET Core MVC Application. In this article, I explained the Image Tag Helper in the ASP.NET Core MVC Application with examples. I hope you enjoy this article.