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

Posted on 2009-02-13
Last Modified: 2013-12-25
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.
Question by:EricsTheBoy
    LVL 19

    Expert Comment

    You will need to use a custom item renderer to display an image in a datagrid.

    Here is an example:

    Here is another example:

    Author Comment

    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

    LVL 19

    Expert Comment

    OK so event.result.Tables.Table.Rows  is base64 encoded image?
    LVL 19

    Assisted Solution


    Accepted Solution

    Thank you for this. I'll have a go over the weekend and let you know how I get on.

    Author Comment

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    Read about why website design really matters in today's demanding market.
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now