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
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.
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.
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.
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
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.
No comments:
Post a Comment
It would be great if you can help share these free resources