Custom Helper Method for Image in MVC

Introduction

In my previous few blogs, we have discussed how to create a custom html helper method, in this blog we will discuss how to create a custom html method which will render image in web page.

Getting Started

Recently I was working in a web project where the project is listing out images. The complete project is developed using MVC technology and using the HTML image tag, we are listing out the images in project. The project is about to completed, then suddenly a new requirement came from client that they have implemented authorize token to access image URL. We know that the image directly accepts URL or local path to display image there is no provision to customize header part of HTML image tag.

The requirement was like this as the query string data is visible in URL, the client asked us to use the authorized token in the request header. In response, we will receive an image in bytes.

Earlier I have experienced the use of an HTML image tag with an image URL or path of the image (If it is in the local path) to display images on the web site. Before this, I was never facing this kind of requirement but we have to deliver the project before the deadline.

I searched for the implementation of the requirement in google and got lots of articles, there I found with help of custom HTML helper method I can achieve the requirement. The HTML tag also support directly bind of Base64string using below line of code.

 <img src="data:image/png;base64,{0},imagebase64value">  

in the above code the "data:image/png;base64,{0}" is indicated to render about the content type of image that the image is going to bind Base64string.

But I have to make an API call with the authorized token, I created an HTML custom helper method. To know how to create an HTML custom helper, visit the articles I have listed below this article.

Let’s discuss how I achieved my requirement, in the above paragraph I mentioned that the HTML image tag is supporting the bind of base64 string in SRC. I used this technic before that in the HTML custom helper method, called API for image bytes. Then with the help of HTML string, I created an HTML image tag, set the pre-discussed image attribute, converted the image bytes received from API response to base64 string, and bind it to image SRC attribute.

See the below code of written in HTML custom helper method to better understand.
C# Code for Helper method

 public static MvcHtmlString MyImage(this HtmlHelper helper, string id, string src, string alt, string height, string width)  
     {  
       RestClient client = new RestClient(src);  
       var request = new RestRequest(Method.GET);  
       string token ="mytoken";  
       request.AddHeader("Authorization", "Bearer " + token);  
       IRestResponse response = client.Execute(request);  
       string imreBase64Data = Convert.ToBase64String(response.RawBytes);  
       string imgDataURL = string.Format("data:image/png;base64,{0}", imreBase64Data);  
       // Below line is used for generate new tag with img   
       var builder = new TagBuilder("img");  
       // Below five lines are used for adding atrribute for img tag   
       builder.MergeAttribute("id", id);  
       builder.MergeAttribute("src", imgDataURL);  
       builder.MergeAttribute("alt", alt);  
       builder.MergeAttribute("height", height);  
       builder.MergeAttribute("width", width);  
       // this method will return MVChtmlstring and Create method will render as selfclosing tag.   
       return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));  
     }  

The above code in custom html helper, inside the helper method
HTML Code

 @model MVCCustomImageHelper.Models.TestModel  
 @{  
   ViewBag.Title = "Index";  
 }  
 <h2>HTML Cusom Helper for Image Demo</h2>  
 <div>  
   <dl class="dl-horizontal">  
     <dt>  
       @Html.DisplayNameFor(model => model.ImagePath)  
     </dt>  
     <dd>  
       @Html.DisplayFor(model => model.ImagePath)  
       @Html.MyImage("myimage", "https://k6u8v6y8.stackpathcdn.com/blog/wp-content/uploads/2015/05/Rath-Yatra-Information-Guide.jpg", "MyImage control demo", "200", "400");  
   </dl>  
 </div>  
 <p>  
   @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |  
   @Html.ActionLink("Back to List", "Index")  
 </p>  

Related Articles

1. Custom Model Bound HTML Helper using Static Method
2. Custom Model Bound HTML Helper using Extension Method in MVC
3. Custom Strongly Type or Model Bound Helper Method in MVC
4. Custom HTML Helper Method in MVC

Thanks