Use a System.Drawing.Image in an HTML tag

Question

I have a potentially easy question. I have an image stored in a database, I then used a C# method in my application that gets that image and stores it in a custom class that looks like this:

public class MyImage
{
 public System.Drawing.Image myImageFromDB;
 public string imageName;
 public int imageNumberInCollection;
}

My question is this: Can I/How can I use the image from this class in an HTML image tag? I have attempted the following but it just returns a box with a red X in it:

//myImageFromDBCollection is a list of MyImage objects
foreach(var ind in myImagesFromDBCollection)
{
  table += String.Format("<image src={0} />", ind.myImageFromDB);
}

Any ideas on what I am doing wrong?

You need to serve that image. You can't just stick image data in the page. You could base64-encode it, but there are limitations with this method, and it isn't really suitable for anything but icons and such. — Brad, Nov 26 '12 at 20:17
run you site, right-click and view source and see what's there. Your browser might also have an error console(i know firefox does at least) you should check there for errors too. — Sam I am says Reinstate Monica, Nov 26 '12 at 20:18
@Sam I am when I right click and view source on the image it appears that all that is being set as the source is 'System.Drawing.Bitmap' show as Brad said I cannot just stick image data in the page. As for the viewing method I am not running this in a browser. This is a stand alone C# application that is used to make reports based off of some data in a database. There is an html preview of what the report is going to look like which is where the images are suppose to be shown. As for the version of ASP w0lf I am using, I'm not using ASP I'm just using straight HTML — Jimmy, Nov 26 '12 at 20:32
Jimmy are you spitting out HTML from a c# desktop or console app? If so, then you need to do 2 things: 1) spit out the image into an image file then 2) point the "src" to that file name/location. Gregor's answer shows how to do part of it, but he is assuming you are in ASP. Until I saw your comment I assumed ASP as well. You might want to edit the question to be clear that you are NOT using ASP. — jeffa00, Nov 26 '12 at 21:13

score 14 · Accepted Answer · edited May 19 '17 at 13:17

I ended up going with Brads Method of solving this (See the comment under the question) I ended up creating a method that takes in a System.Drawing.Image and converts it to a byte array then encode that byte array to get the image. The code looks like the following:

byte[] imgBytes = turnImageToByteArray(ind.ind.myImageFromDB);
string imgString = Convert.ToBase64String(imgBytes);
table += String.Format("img src=\"data:image/Bmp;base64,{0}\">", imgString);

private byte[] turnImageToByteArray(System.Drawing.Image img)
{
  MemoryStream ms = new MemoryStream();
  img.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
  return ms.ToArray();
}

Currently this works for my purposes so thank you to everyone and their suggestions, as always everyone comes though and helps :-)

I used this solution with dynamically creating a HtmlImage object, assigning the Src property as described above, and lastly adding the new object to an existing panel control. — sonyisda1, Oct 03 '16 at 19:53

score 3 · Answer 2 · answered Nov 26 '12 at 20:27

Images can be served using generic handlers (ashx files):

public class StickerHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/png";
        context.Response.Cache.SetCacheability(HttpCacheability.Public);
        context.Response.BufferOutput = false;

        //TODO: link your MyImage to iSource using imageId query parameter...
        Image iSource = null;
        MemoryStream ms = new MemoryStream();
        iSource.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
        byte[] data = ms.ToArray();
        ms.Dispose();
        g.Flush();
        g.Dispose();
        iSource.Dispose();

        context.Response.BinaryWrite(data);
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }

}

More about generic handlers can be found here:

http://msdn.microsoft.com/en-us/library/bb398986(v=vs.100).aspx

Inside your image:

<img src='StickerHandler.ashx?img=imageId' />

Happy coding!

Problem with this approach is that it's not dynamic, you have to pass a static value (imageId) to the ImageHandler. So you can't bind to a collection of images where the imageId will change. For example, DataList bound to a collection/list of objects with System.Drawing.Image properties. — Rob Ainscough, Jan 11 '23 at 21:43

score 1 · Answer 3 · answered Nov 26 '12 at 20:20

1

If I were you, I'd keep image files on disk, and just have the image filenames in your db.

If you're having a problem with your image formatting, than just look at your source and make sure it's correct.

answered Nov 26 '12 at 20:20

Sam I am says Reinstate Monica

30,851
12
72
100

Marko · Answer 4 · 2012-11-26T21:16:01.963

If you have to store your images in the database, a simple way to view them would be to use an image handler.

Basically, you can create an ASHX handler which accepts a query string that is the Image ID in the database and returns the image content along with the correct mime type. This is quite simple to do in C#.

You can then point the <img /> tag to the handler with the specified ID. Something like

table += String.Format("<image src='/ViewImage.ashx?id={0}' />", ind.myImageId);

Here is a basic tutorial to get you started.

A common performance improvement would be to cache the images on disk within the handler.

Use a System.Drawing.Image in an HTML tag

4 Answers4

Linked