title: Display an image in HTML img as base64 data returned by ASP.Net Core Web Api
body: <p>I am using ASP.Net Core 2.1 Web API.
  I am trying to send base64 data from API endpoint like data:image/png;base64,xxxx
  and using it in HTML img tag. 
  1st and 2nd images render but 3rd and 4th don't. </p>
  
  <p>My questions are:</p>
  
  <ul>
  <li>How can I render the 3rd image without using JavaScript/JQuery?</li>
  <li>What mistake am I making that my 4th image doesn't render?</li>
  </ul>
  
  <p>I am new to Asp.Net Core. So if there is any childish mistake in code please correct.</p>
  
  <p>Thaks in advance.</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-us"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
  
      &lt;title&gt;Image Test&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;
          1:- Image Through JavaScript
          &lt;img id="sample-img" /&gt;
      &lt;/p&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function () {
              var url = "https://localhost:44367/api/LatexImage/GetBase64Uri";
              $.get(url, function (data) {
                  //console.log(data);
                  $("#sample-img").attr('src', data);
              });
          })
      &lt;/script&gt;
      &lt;p&gt;
          2:- Image from GetPng:
          &lt;img src="https://localhost:44367/api/LatexImage/GetPng" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          3:- Image from GetBase64Uri:
          &lt;img src="https://localhost:44367/api/LatexImage/GetBase64Uri" /&gt;
      &lt;/p&gt;
  
      &lt;p&gt;
          4:- Image from PngFromBase64:
          &lt;img src="https://localhost:44367/api/LatexImage/PngFromBase64?Base64Png=iVBORw0KGgoAAAANSUhEUgAAADoAAAASCAIAAACFJlokAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAADtElEQVRIibVWW0gqXRReHWcItCBCtNLAkkAkqCCVqKDbgwS9FNH9wUK6QRT0ENGNiCAfgsCExBeDIkGksKJEejEiEkoxNJICkygfBC%2Fg5Ew5%2F8Oc31%2F0%2FIdOzfme1t7rW9%2F%2BZs3M3juLJEmgDziOJxIJGgVTgaIoQqMchmHz8%2FOVlZU0aqaivLw8i8bu7u%2Fvs9nsuro6ugQz8YNGLZfL9Ve9Ao1239%2FfURSlSy0VsVjMYDC4XC4AAJImmEwmm81Gl1oqNjc3w%2BHw0NCQ2Wymrbu3t7e1tbW%2FTEUikd3dXa%2FX%2B0kpp9NpNBqTw%2BvraxaLJRKJbm5u6LGLYRiCIFlZWZkpkiS3t7dbW1uXl5fPz8%2FTspFIJLPk4eFBr9cnhzqdDgDcbrdCofi6XRzHk%2FHp6Wl9ff0vaYlEwuFw5OXllZSUOByOtOzq6mpmSTAYFIvFqTN7e3sLCws8Hu%2BnXZ%2FPp1ar9Xp9OBz%2BjFeSJNva2uLxODVM2xPMZrNGo7m4uAgGgwwGQ6fT4Tju8%2Fl6eno%2BI26321EUVavV1OPt7OwQBOFyuSwWCwIAHo9Ho9Gsra1tbGxYLJbOzk6K5PF40oQ4HM7ExATVAIFA4HQ6pVJp2p6wvr7OZDLHxsY6OjqUSqVcLqfUVCpVfn7%2BZxrx9PSkUCiqqqp6e3tNJlMoFHp7ewsGg11dXQgALC4uDg8PM5nMgYGBoqIiqqyvr%2B83omw2WyKRXF5eSqVSq9WabO3z8%2FPJycnx8TEAxOPx5uZmANBqtTk5OVdXVywWq6mpye%2F3b21tUfz7%2B%2Fu5uTkq7u%2FvF4lEj4%2BP2dnZNTU14XAYwzAAGB8fT66LEAQRCASo9fh8PvnvIWcwGO7u7jK7Ozo6SsUVFRVarRYA3G731NQUNWmz2bhcLoIgXq83Nzf39fWVx%2BPFYrFoNPry8jI4OAgAxcXFKysrFH9mZiYZU7Db7SKRCADOzs4KCgrSDCAoihYWFhIEgSCI0Wisrq4WCoUA0N7e%2FvHxkcb%2B8eO%2FX1MikahUKoqT3BPEYrHVagUAvV4vEAiOjo5GRkYmJyf%2F9zVlQCgUOp1OHMcPDw%2Bnp6fTsoylpSWZTGYwGDweT0NDg0Ag%2BJlgMJAMMBiM1OKDgwOCIIRCYWlpKTXD5XIxDLPb7XK5PBAINDY2cjic35izWq0tLS2pMzweLxQK2Ww2pVJZVlaWXvCd82Z2dra7u5sgiC8r%2BP3%2BP%2BJ%2F6wIpk8mi0SiCfF2Ez%2Bf%2FEf9bF0iSJBOJRNoX8lfxD9Bi173YEwzdAAAAAElFTkSuQmCC" /&gt;
      &lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>ASP.Net Web API Controller</h2>
  
  <pre><code>namespace LaTex.WebApi.Controllers
  {
      [Route("api/[controller]/[action]")]
      [ApiController]
      public class LaTexImageController : ControllerBase
      {
  
          private const int _PX = 20;
  
          private async Task&lt;byte[]&gt; GetImgApiData( string tex, int px, int encoded)
          {
  
              if (px &lt;= 0)
              {
                  px = _PX;
              }
  
              if (string.IsNullOrEmpty(tex) || (tex.Trim().Length == 0))
              {
                  tex = @"x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}";
              }
  
              if (encoded == 0)
              {
                  tex = WebUtility.UrlEncode(tex);
              }
  
              string ImgApiUrl = $"https://chart.apis.google.com/chart?cht=tx&amp;chs={px}&amp;chl={tex}";
  
              using (HttpClient client = new HttpClient())
              {
                  HttpResponseMessage response = await client.GetAsync(ImgApiUrl);
                  byte[] bytes = await response.Content.ReadAsByteArrayAsync();
  
                  return bytes;
              }
          }
  
          [HttpGet]
          public async Task&lt;IActionResult&gt; GetPng([FromQuery] string tex, int px, int encoded)
          {
              byte[] ImgApiDataBytes = await GetImgApiData(tex, px, encoded);
              return File(ImgApiDataBytes, "image/png");
          }
  
          public async Task&lt;string&gt; GetBase64([FromQuery] string tex, int px, int encoded)
          {
              byte[] ImgApiDataBytes = await GetImgApiData(tex, px, encoded);
              return (Convert.ToBase64String(ImgApiDataBytes));
          }
  
          [HttpGet]
          //public async Task&lt;string&gt; GetBase64Uri([FromQuery] string tex, int px, int encoded)
          public async Task&lt;string&gt; GetBase64Uri([FromQuery] string tex, int px, int encoded)
          {
              return ("data:image/png;base64," + await GetBase64(tex, px, encoded));
          }
  
          [HttpGet]
          public IActionResult PngFromBase64([FromQuery] string Base64Png)
          {
              byte[] image = Convert.FromBase64String(Base64Png);
  
              return File(image, "image/png");
          }
      }
  }
  </code></pre>