Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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, 2012 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, 2012 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, 2012 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, 2012 at 21:13
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 3, 2016 at 19:53
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
            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 at 21:43
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.  
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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.