Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

ASP.NET Core Image tag helper

Suggested Videos
Part 34 - Install and use Bootstrap in ASP.NET Core | Text | Slides
Part 35 - Tag helpers in ASP.NET Core | Text | Slides
Part 36 - Why use tag helpers | Text | Slides

In this video we will discuss Image Tag Helper in ASP.NET Core with an example.

Browser Cache

When we visit a web page, most modern browsers cache the images of that web page. When we visit the page again, instead of downloading the same image again from the web server, the browser serves the image from the cache. In most cases, this is not a problem as images do not change that frequently.

Disable Browser Cache

For some reason, if you do not want a browser to use it's cache you can disable it. For example, to disable cache in Google chrome
  • Using F12 key, launch Browser Developer Tools
  • Click on the "Network" tab
  • Check "Disable Cache" checkbox
google chrome disable cache

The obvious problem with disabling the browser cache is that, the images have to be downloaded from the server, every time you visit the page.

ASP.NET Core Image tag helper

From a performance standpoint, wouldn't it be great to download the image only if it has changed on the server. If the image has not changed, use the image from the browser cache. This means we will have the best of both the worlds.

Image Tag Helper can help us achieve this. To use the Image tag helper, include asp-append-version attribute and set it to true.

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

Image Tag Helper enhances the <img> tag to provide cache-busting behavior for static image files. Based on the content of the image, a unique hash value is calculated and is appended to image URL. This unique string prompts the browser to reload the image from the server and not from the browser cache.

<img class="card-img-top" src="/images/noimage.jpg?v=IqNLbsazJ7ijEbbyzWPke-xWxkOFaVcgzpQ4SsQKBqY" />

Each time the image on the server changes a new hash value is calculated and cached. If the image has not changed the hash isn't recalculated. Using this unique hash value, the browser keeps track of whether the image content on the server has changed. core tutorial for beginners

No comments:

Post a Comment

It would be great if you can help share these free resources