How to show an image in the browser only having its contents (byte[])

Question

I'm developing a MVC application and I need to show an image in the browser, but I haven't the file physically on disk.

I only have a byte[] array in my model, with content of the image. Is there any "easy" trick to show the image in the view, without writing it to the disk?

The first approach that comes to my mind is writing a temp file, but:

What file name should I choose?
When should I delete it? I'm afraid that we will leak those files.

So I don't want to write the contents to a file. Is there any other approach?

Thanks in advanced.

EDIT: The result page is not only the image, I need to show some text, and below, the image, for example:

  <%= Response.Write("Some text here") %>
  <%= /* Here my image */ %>

dude just stream it :-), I am looking for the same question on SO — Jahan Zinedine, Jan 14 '11 at 11:33
http://stackoverflow.com/questions/1769944/how-to-show-image-from-byte-array and http://stackoverflow.com/questions/1738020/bytearray-to-image-asp-net/ — Jahan Zinedine, Jan 14 '11 at 11:36
@Jani: Sorry, maybe I forgot to say that I need to show more content (text) in the result page, see my edits — Daniel Peñalba, Jan 14 '11 at 11:43

score 6 · Accepted Answer · answered Jan 14 '11 at 11:56

I'd create a controller action that returns the image from a byte array. In your view, you can use the normal <img> tag, setting the src attribute to your controller action that renders the image.

It would be something like this:

[HttpGet]
public ActionResult Render(...)
{
    byte[] imageBytes = ...;

    MemoryStream imageStream = new MemoryStream();
    imageStream.Write(imageBytes, 0, imageBytes.Length);

    return new FileStreamResult(imageStream, "image/png"); // might be a different mime type depending on your image type
}

From your View you can then do:

<p>Some text here</p>
<img src="<%= Url.Action("Render", "MyController", new { params as needed }) %>" alt="Image" />

That worked for me however before returning the stream I had to set the position to 0. otherwise I received an error saying too few bytes were written. so the line after imageStram.Write... I add: imageStream.Position = 0; — T3.0, May 09 '19 at 23:49

score 1 · Answer 2 · answered Jan 14 '11 at 11:34

1

Several options:

Write a HTTP handler that will return the byte array and point the image URL to it
Write a custom image controller and point the image URL to it
Use the data URI scheme outputting the image data directly
If you just want the image and are not serving up HTML, just stream it out with the correct headers

answered Jan 14 '11 at 11:34

Oded

489,969
99
883
1,009

Thanks for your reply, I need to mix text and the image in my output page, maybe the question was not clear. See my edits. – Daniel Peñalba Jan 14 '11 at 11:46

score 0 · Answer 3 · answered Jan 14 '11 at 11:42

0

You can have a page that will serve image like that:

var context = System.Web.HttpContext.Current;
context.Response.Clear();    
context.Response.OutputStream.Write(buffer, 0, buffer.Length);
context.Response.End();

You should also set context.Response.ContentType to something meaningful. If you use ImageEncoder to generate array of bytes, you can use its mimeType property, if not - figure the way to provide a correct content-type (like "image/PNG")

answered Jan 14 '11 at 11:42

Dyppl

12,161
9
47
68

Thanks for your reply, I need to mix text and the image in my output page, maybe the question was not clear. See my edits. – Daniel Peñalba Jan 14 '11 at 11:46
Yes, but I assumed that you have it stored in cache or `HttpContext.Current.Items`, so you just put the address of your picture-rendering-page in the `` tag of the "main page" and use the cache or context there to access the byte buffer – Dyppl Jan 14 '11 at 12:29

How to show an image in the browser only having its contents (byte[])

3 Answers3