title: Display image using FileStreamResult from ASP.Net MVC
body: <p>I am developing a captcha control which allows for refresh of the captcha image. I do not have the option of storing the image on the server. I am using ASP.Net MVC for this purpose.</p>
  
  <p>My controller action code:</p>
  
  <pre><code>public FileResult GetCaptchaImage()
  {
  
      // Create a CAPTCHA image using the text stored in the Session object.
      CaptchaImage ci = new CaptchaImage(this.Session
          ["CaptchaImageText"].ToString(), 300, 75);
      // Change the response headers to output a JPEG image.
      MemoryStream stream = new MemoryStream();
      ci.Image.Save(stream, ImageFormat.Png);
      stream.Seek(0, SeekOrigin.Begin);
      return new FileStreamResult(stream, "image/png");
  }
  </code></pre>
  
  <p>The html code to display the image in the razor view</p>
  
  <pre><code>&lt;img id="captchaImage" class="img-responsive" src="@Url.Action("GetCaptchaImage","Home")" /&gt;
  </code></pre>
  
  <p>Now, when I click on the refresh button, this img should get updated. On click of the button, I am calling the same controller action again using an ajax call and it is returning the FileStreamResult. </p>
  
  <pre><code>function RefreshCaptcha() {
  $.ajax({
      url: "/Home/GetCaptchaImage"
  }).then(function (data) {
      console.log(data);
  });
  </code></pre>
  
  <p>}</p>
  
  <p>Now, using JQuery, how do I set the response content in the image?</p>
  
  <p>Please guide. Thanks very much.</p>