How to get Image returned as binary from Webservice to display in Flex

I have a webservice that provides text fields and an image field from a backend SQL server database. I want to display this information in a datagrid in Flex. The text is displaying OK, but the images aren't. The SOAP response identifies the images as base64encoded, and I have seen in the debugger that they have been interpreted by Flex as Byte arrays. I have tried feeding the array through a Loader, but I can only get a small placeholder to show in the datagrid - not the actual images.
Who is Participating?
EricsTheBoyAuthor Commented:
Thank you for this. I'll have a go over the weekend and let you know how I get on.
You will need to use a custom item renderer to display an image in a datagrid.

Here is an example:

Here is another example:
EricsTheBoyAuthor Commented:
Dear Jones911,

Thank you for the quick response, but this in not exactly what I was after - I'm sorry, but I think I didn't put in a good enough description of the problem. The datagrid has 5 columns, to reflect the 5 fields in the database. The first 4 columns display text data, and i wanted to put the image in the 5th column. I don't need to display combined text & image in one column. The text dispalys fine in the first 4 columns, so my backend query is working fine, and as far as the text is concerned it is coming across from the web service and displaying as it's supposed to. The problem is actually getting the image(s) to display correctly in the 5th column of the datagrid.

The code for the Application is detailed below. As you will see, the <mx:Image> control is taking the {data.ImgaeFile} as it's provider, but is converting this first using a seperate function (also attached at the bottom).

The resultant datagrid doesn't show the image, but it does show a small rectangle that looks like a placeholder for the image in each cell of the 5th column - well at least for the first three rows as i only have three datarows in my database.

The data is coming over the link via SOAP, and when I inspect the SOAP response, the image field  does show as base64 encoded data (the image field in the database is a Varbinary(MAX) field.

Hope this helps to clarify the problem.

Regards, Huw.
<?xml version="1.0" encoding="utf-8"?>
		import classes.ConvertImage;
		import mx.collections.ArrayCollection;
		private var imageData:ArrayCollection;
		public var currentImageElement:ImageElement;
		private function resultHandler(event:ResultEvent):void 
			imageData=event.result.Tables.Table.Rows as ArrayCollection;
	result="resultHandler(event)" />
		label="Get Images Data" 
			<mx:DataGridColumn headerText="Image ID" dataField="ImageID"/>
			<mx:DataGridColumn headerText="Image Name" dataField="ImageName"/>
			<mx:DataGridColumn headerText="Date Taken" dataField="ImageDate"/>
			<mx:DataGridColumn headerText="Artist" dataField="ImageArtist"/>
			<mx:DataGridColumn headerText="Image" dataField="ImageFile">
						<mx:VBox height="10">
							<mx:Image source="ConvertImage({data.ImageFile})" autoLoad="true"/>
		label="Get Single Image" 
package classes
	import flash.display.Loader;
	import flash.utils.ByteArray;
	import mx.controls.Image;
	public class ConvertImage
		public function ConvertImage(inImage:ByteArray):Image
					var imgLoad:Loader=new Loader();
					var img:Image=new Image();
					return img;

Open in new window

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

OK so event.result.Tables.Table.Rows  is base64 encoded image?
EricsTheBoyAuthor Commented:
Dear Jones911. I'm still having problems getting the image to display, but I have a nagging feeling that my Web Service is not working correctly, and that when I do get thsat to work your solution will be just what I need. If not, I'll post again. Thank you for your help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.