ASP.NET MVC Image in response output stream. Not working

Question

I want to display an image directly into the view and so I am calling an action method and writing the image in output stream.

But I am getting error saying "The image cannot be displayed as it contains error". I am sure the image is generating properly but not sure whats wrong with my controller code.. had anyone came across such scenario?

Thanks in advance..

Here is my controller action

[ChildActionOnly]
    public ActionResult GetCaptcha()
    {

        try
        {
            this.Session["CaptchaImageText"] = GenerateRandomCode();

            this.Response.Clear();

            this.Response.ContentType = "image/jpeg";

            Bitmap img = new Bitmap(Server.MapPath("../Images/captcha.jpg"));

            Graphics graphicImage = Graphics.FromImage(img);
            graphicImage.SmoothingMode = SmoothingMode.AntiAlias;

            graphicImage.DrawString(this.Session["CaptchaImageText"].ToString(),
                                    new Font("Arial", 12, FontStyle.Bold),
                                    SystemBrushes.WindowText, new Point(100, 250));

            graphicImage.DrawArc(new Pen(Color.Red, 3), 90, 235, 150, 50, 0, 360);

            //Save the new image to the response output stream.
            img.Save(this.Response.OutputStream, ImageFormat.Jpeg); 

            // Create a CAPTCHA image using the text stored in the Session object.

            graphicImage.Dispose();
            img.Dispose();
        }
        catch (Exception ex)
        {
            ex = null;
        }
        var v = new FileStreamResult(Response.OutputStream,"image/jpeg");
        return v;
    }

And here is how I am calling the action method from view

    <tr><td> <iframe width="200px" height="80px" frameborder="1" scrolling="no"> <img src="@Url.Action("GetCaptcha")" alt="SimpleChart" /> </iframe>  </td></tr>

instead of returning EmptyResult() from controller action return File() and instead of using @Html.Action() inside view use @Url.Action() — Kartikeya Khosla
– Kartikeya Khosla, Commented Feb 26, 2015 at 5:34
Thanks for quick response. I tried with your suggestion but no luck.. code var fileresult = new FileStreamResult(this.Response.OutputStream, "image/jpeg"); return fileresult; — Nakul Varge
– Nakul Varge, Commented Feb 26, 2015 at 5:49
instead of rendering image inside iframe use this <img src='@Url.Action("GetCaptcha")' /> — Kartikeya Khosla
– Kartikeya Khosla, Commented Feb 26, 2015 at 5:53
Updated my code with the changes.. no errors now but image is not loading — Nakul Varge
– Nakul Varge, Commented Feb 26, 2015 at 7:17

Jenish Rabadiya · Accepted Answer · 2015-02-26 07:25:49Z

2

You need to return file instead of EmptyResult.

return File(imageByteData, "image/png");

and in the view side:

<tr><td> <iframe>  <img src='@Url.Action("GetCaptcha")'/> </iframe>  </td></tr>

Update

Don't write to response instead do like below.

[ChildActionOnly]
public ActionResult GetCaptcha()
{

    try
    {
        byte[] imageByteData = null
        this.Session["CaptchaImageText"] = GenerateRandomCode();

        this.Response.Clear();

        this.Response.ContentType = "image/jpeg";

        Bitmap img = new Bitmap(Server.MapPath("../Images/captcha.jpg"));

        Graphics graphicImage = Graphics.FromImage(img);
        graphicImage.SmoothingMode = SmoothingMode.AntiAlias;

        graphicImage.DrawString(this.Session["CaptchaImageText"].ToString(),
                                new Font("Arial", 12, FontStyle.Bold),
                                SystemBrushes.WindowText, new Point(100, 250));

        graphicImage.DrawArc(new Pen(Color.Red, 3), 90, 235, 150, 50, 0, 360);

        MemoryStream stream = new MemoryStream();
            bitmap.Save(stream, ImageFormat.Jpeg);
            imageByteData = stream.ToArray();

        // Create a CAPTCHA image using the text stored in the Session object.

        graphicImage.Dispose();
        img.Dispose();
        return File(imageByteData, "image/png"); 
    }
    catch (Exception ex)
    {
        ex = null;
    }

}

edited Feb 26, 2015 at 7:25

answered Feb 26, 2015 at 5:56

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nakul Varge Over a year ago

The error is gone when I use your code <img src='@Url.Action("GetCaptcha")'/> but the image is not getting loaded in the page

Jenish Rabadiya Over a year ago

Inspect the element for the image's source and also update your question with update code.

Nakul Varge Over a year ago

Updated my code with the changes.. no errors now but image is not loading

Nakul Varge Over a year ago

+1 thanks for the quick answers @JenishRabadiya the image is loading now... one more thing I did is to remove the [ChildActionOnly] from my action method and the image is loading! Appreciate ur time..

Fabian Nicollier · Accepted Answer · 2015-02-26 07:25:38Z

0

I think you are using FileStreamResult wrong.

Change img.Save(...) to same into a memory stream and in FileStreamResult(...) return that memory stream.

answered Feb 26, 2015 at 7:25

Fabian Nicollier

2,8601 gold badge23 silver badges19 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Image in response output stream. Not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related