Display image using MVC helper method

Kailash Chandra Behera | Saturday, June 06, 2020

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 an IMG tag here, for more about HtmlString visit this site.

Here we will create the IMG that what we are using regularly(see the HTML code below) while developing a web application to display images, will use the src, height, width, and other attributes of IMG tag in a helper method. The src attribute is required to display images in the web where we can pass image links, image path, or image bites. Other attributes of img tag useful to customize 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 the first helper method will bind image link to src of img tag and in the second helper method, we will bind image bytes to src. To know how to create the helper method, visit my other sites listed in the blow topic.
See the below code which creates two HTML methods for creating or rendering IMG tag on the web page.

Example:- HTML Method for rendering Image using link
 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 creating helper method form img tag

Example:- HTML Method for rendering Image using bytes
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));  
 }

Example of creating helper method form img tag using bytes

Thanks

By at