Display image using HTML helper method in MVC

Introduction

This blog describes how to display image in web using html helper method in MVC. We know that the Html img tag available to display image in web pages, here we will discuss how to create same img tag using html helper method.

Getting Started

The HtmlString class is helping to create any html tag, it represents an HTML-encoded string that should not be encoded again. Using this HtmlString we will create img tag here, for more about HtmlString visit this site.

Here we will create same img that what we are using regularly(see the HTML code below) while developing web application to display images, will use the src , height, width and other attributes of img tag in helper method. The src attribute is required to display image in web where we can pass image link, image path or image bites. Other attributes of img tag useful to customise img tag like set height and width etc. 




  @Html.MyImage("myimage", "https://k6u8v6y8.stackpathcdn.com/blog/wp-content/uploads/2015/05/Rath-Yatra-Information-Guide.jpg", "MyImage control demo", "200", "400");

Here we will create two helper methods in first helper method will bind image link to src of img tag and in second helper method we will bind image bytes to src. To know how to create helper method, visit my other sites listed in the blow topic.
See the below code which creates two html method for creating or rendering img tag in web page.

Example of create or render image using helper method (Link Bind)
 public static MvcHtmlString MyImage(this HtmlHelper helper, string id, string src, string alt, string height, string width)  
 {  
      // 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));  
 }



Example of create or render image using helper method (Bytes Bind)

Let’s say we are getting image bytes from an API, here the below code is calling an API which sends bytes as response. The bytes then converted into base64string and binds to img tag src. See the below code for more details.
 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);  
      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));  
 }

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

By at