(#38) Image tag helper in asp.net core | Asp.Net Core tutorial

in this tutorial we are learning about tag helpers in previous video we were learning about anchor tag helper now in this video we will learn one of the most important used tag helper the name is email style helper what is image tag helper what problem does image tag help a result now if I talk about the image tag in HTML then if you are using the normal image tag then in some scenario we might have some problem we will also focus on that problem first how can we handle guessing using image tag helper this is one of the most important concept that image tag helper is own how to handle guessing several other things you will learn in this video so let us start image tag helper is used to give some additional capabilities to the existing HTML image tag if you are working on an asp.net core NEC application it means you are working on an web application and in web application you have to use images at some of the parts of your application so working and handling those images is one of the most important tasks for any web application image tag helper is used to provide casts busting behavior for static image what is this meaning of cast busting behavior that we will learn in this video before learning about image tag helper let's focus what problem we can get if you are using HTML image tags here we are back to a book store application and in this book store a player s'en we have used few images if I run this application by pressing ctrl f5 at this place you can see on top of our nav bar we are using an image and the image represents the logo we are also using few images inside our old books let's open a particular book here as well you can see that we are using 3 images if I open the developer tool of this browser right click and choose inspect you can also click on the f12 button from your keyboard let's go to the network tab and here in the network tab you can see we have several tabs let's click on the images so if you'll click on the images it means all the images that are used into this application all those URLs will be available over here inside this network tab basically we are filtering only the images from this network tab ok let's first remove the test of this browser right click on the refresh button and choose empty casts and hard refresh so here you can see that we are using for images this is the logo then we have the book 1 book 2 and book 3 and these images are loaded from the server this is the size and this is the time that is required to load these images from the server right now we are using is Express server which is running into the local system so we are getting these images very quickly here you can see the size of the images is high so for example this one is 6 MB this one is 1.5 mb 9 v 2 kb but we are getting these images in very quick time why because everything is working on to my local system ok now without doing anything if I click on the refresh button again this time you can see all the images are coming from memory cache what is this memory cache each browser helps some default functionalities to improve its performance because there is also some computation in between browsers so if some browser is loading some data first then ultimately we will be using that browser browser also has their own guess what happens when any particular image gets load into the browser then browser cast that image and if you will hit this and if second time that image is required into the application then instead of hitting the server that image is loaded directly from the browser cache so this is what happening over here this time this browser is not hitting the server for these images these images are coming directly from browser cache if i refresh again then every time I will refresh this application you will see that all these are coming from the memory cache let's see what will be the problem if you are having these memory casts if I expand my solution and go to the WW route inside this WOWT you can see we have few images and here you can see we have one logo dot PNG file suppose I want to add new image into my application so right click on this one and choose paste here you can see this image belongs to a person okay let's update the name so suppose I want to update the name of the first one let's make it logo one and update the name of the new image so we can say though what is the purpose I simply want to update the logo image on to my server let's save all the changes this time you can see that this logo dot PNG is not the web dental logo it is the image of something else okay so since we have updated the image onto the server so it should get updated onto the browser as well let's go to the browser just refresh the page this time you can see still we are getting the old image into the Lobo section of our let's try one more time as well this time again we are getting only the old image why we are getting the old image because this browser is not hitting the server to get these images this browser is getting all the images from the browser cache memory now what is the solution to resolve this problem first one is we have to remove the Cask of this browser and to remove the case of the browser there are several ways either you can choose control shift delete and select this cache images and file and click on the kilian now this is the first solution second one is you have to right-click on this refresh button and choose empty cache and hard refresh third one is that you can disable the case altogether into your browser but if we talk about the normal user or a general user then that general user do not have any knowledge about these technical things he simply want to refresh the space by clicking either on this button or by clicking on the f5 button from the keyboard and from both the options you can see that we are not getting the updated image okay so if I right-click on this one and choose empty cache and hard refresh then this time you can see that we are getting the new image but the general user will not follow these rules so what is the best solution to resolve this problem asp.net will provide a new tag helper for the images and that is called image tag helper and to work on the image tag helper we have to add few attributes into the image HTML tag what is the attribute name it is ASP append version if you'll use this attribute into the normal HTML tag then it will be converted into image tag helper and we will get some awesome functionalities let's see how it works the core of the logo is written inside this layout file so I'll be opening layout file here you can see that we are using the image tag and inside this image tag we are providing the SRC and it goes to the logo dot PNG and this is the logo dot PNG okay so we have to use ASP append version attribute for image tag helper let's use that ASP append version and we have to provide its value to true so let's not make any further change into the application go back to the browser and just refresh the page this time you can notice that along with the logo dot PNG name there is a string appended over here let's see the page source as well right click on this space and choose view page source here is the logo let's focus on to the URL so it says images logo dot PNG and V V means version equals to and we have a key over here this key is known as hashed key so this is a Heskey which is appended into the image path now the question comes why we are appending this has into the SRC of this image tag the answer is that each browser cast these static files with their URL name if there is a new URL into the application then only in that scenario browser will hit the server to get the new file but if the URL is not changed then browser will get the data from its browser cache memory let's try to refresh this page now and please focus on this has string every time you will refresh then you can see that we are getting the same has string over here here as well if I press the space every time you can see that we are getting these images from browser cast now suppose for any scenario we want to update the image on our server let's again use the previous one so here I'll be updating the name first suppose it is two and let's update the name of this logo one let's say old attended this time you can see that we are using the previous logo over here again let's save all the changes go back to the browser first let's open this source file and this time you have to focus on two this has string and I'm going to refresh the page simply by pressing f5 or by using this button of the browser this time you can see the hairs string has been updated automatically why because we have updated the emails own server that is why this URL has been updated and I have already told you that if browser will get new URL for the images then in that scenario browser will hit the server to get the new image let's see whether it is working fine into the application as well so I am simply clicking on this button to refresh this page and this time you can see that we are getting the new updated logo although this was the old logo but in our scenario this is the new logo and if you focus on the network tab as well here you can see that we are getting this image from the server and this is the size this is the time and all other images we are getting from the browser cache so this will resolve our problem and again if you will click on to the refresh button then this time you can see that we are getting this image from the browser cache memory so what is the benefit we are getting the performance and we are also getting the updated data into the browser it means we can say that image tag helper has resolved our problem now I would like to tell few more points about this image tag helper this image style helper will work only if you want to use the image from your own server suppose if you want to access all these files from your server where your application has been hosted then only in that scenario this image tag helper will work but suppose you are using some other blob storage for example you are using as your blob storage and you are giving the you are of your Azure blob storage into your image tag and still you want to use image tag helper then in that scenario it will not work so what is the meaning of this line if you are using an third-party QR or storage for your static files for example images then in that scenario image tag helper will not work image tag helper will work only if you are accessing all the files from your server that is all in this video I hope after watching this video you will be able to work on the image tag helper since I have updated only the logo of this application by using image tag helper and I would suggest to all of you that we should update all the images that we are using into this application for example we are using three images onto the book detail space so I would suggest to all of you that you should download the code from the github repository which is available completely free of course and you should practice this image tag helper on these three images as well if you liked this video please hit the like button of this video tell me your feedback into the comment section if you have any questions query or anything else that you want to tell me you can write everything into the comment section currently share this video and please subscribe to our channel you can also join the web lentil membership program below your video you can see there is a new join button you can click on that join button and you can support us with a little amount of the money this will be very less amount to all of you but if you will join that it will support us a lot thank you for watching have a great day

Channel: WebGentle

Views: 10,645

Keywords: asp.net core, asp.net core tutorial, asp.net core 3.0, asp.net core 3.0 tutorial, asp.net core mvc 3.1, asp.net core mvc 3.1 tutorial, asp net mvc tutorial, dotnet core mvc, asp.net mvc core 3, asp.net mvc core tutorial, asp.net mvc core course, dot net core tutorial, dot net core mvc tutorial, asp.net core 3.1, .net core, image tag helper in asp.net core, image tag helper, image tag helper aspnet core, asp-append-version, asp-append-version tag helper, tag helpers

Id: iJTiPHkTwGU

Length: 12min 57sec (777 seconds)

Published: Sun Apr 19 2020