Displaying DataBase Images in C1Editor

The C1Editor supports insertion and manipulation of images. Generally the images are either stored as local images or image urls are used to display images in tags. This blogs explains how to display database images stored as byte arrays in C1Editor. To do this, we need to embed the image within the HTML file. In our sample, we are using C1DBNavigator (C1Input) which is bound to the Categories table of C1Nwind database. This database is installed with our installers. The C1DbNavigator has a "Position" property which is returns the current row in the table. To fetch the image from the table, we will use this property and 'Picture' column. Below is a code snippet to handle this :

// make sure this is an embedded object  
const int bmData = 78;  
DataTable dt = c1NWindDataSet.Tables[0];  
byte[] picData = (byte[])dt.Rows[c1DbNavigator1.Position]["Picture"];  

try  
{  
 MemoryStream s = new MemoryStream(picData, bmData, picData.Length - bmData);  
 picData = s.ToArray();  
 c1Editor1.Xml = "";  
 var body = c1Editor1.Document.ChildNodes[1].ChildNodes[1];  

 // create an element for the <img /> and add give it a name  
 System.Xml.XmlElement img = c1Editor1.Document.CreateElement("test-img");  

 // add an <img /> to the XmlElement and convert byte array to base64 string  
 img.InnerXml = String.Format("<img width=\\"200px;\\" height=\\"200px;\\" src=\\"data:image/bmp;base64,{0}\\" />", Convert.ToBase64String(picData));  
 // add XmlElement to the HTML body  
 body.AppendChild(img);  
}  
catch (Exception ex)  
{ }

The only potential problem with this approach is that the source may not be very clean. Download Sample