Does Flex support the data uri scheme?

Question

I wish to pass many small PNG files as base64 encoded URIs within an XML response, but there seems to be no way to make flex present these images. I was thinking of the data uri scheme, but it appears not to be supported.

Proposed solutions

1. Use Loader.LoadBytes

Tried it and it doesn't seem to work (none of the events are triggered).

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1276" height="849" creationComplete="drawImage()">
    <mx:Script>
        <![CDATA[
                import mx.controls.Alert;
                import mx.utils.Base64Decoder;

                private function loaderCompleteHandler(event:Event):void {
                        Alert.show("loader done");
            }

            private function errorHandler(e:IOErrorEvent):void {
                Alert.show("error" + e.toString());
            }

                public function drawImage() : void
                {
                        var b64png : String = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==";
                        var l : Loader = new Loader();

                        var decoder : Base64Decoder = new Base64Decoder();
                        decoder.decode(b64png);
                        var bytes : ByteArray = decoder.flush();


                        l.addEventListener(Event.COMPLETE, loaderCompleteHandler);
                        l.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                        l.loadBytes(bytes);

                }
        ]]>
    </mx:Script>
    <mx:Image x="10" y="10" width="155" height="118" id="image1"/>
</mx:Application>

Can someone please tell me what I did wrong?

Answer 1

If you decode the image data into a ByteArray then you can use Loader.loadBytes(byteArray) to load it as an image.

Answer 2

You could use something this to load the image:

var deco64:Base64Decoder = new Base64Decoder;

deco64.decode("base64StringWithTheImageData");

var arrBytes:ByteArray = deco64.toByteArray();

img.load(arrBytes);

Hope this helps!

Answer 3

You can assign the byte array returned from the decoder directly to the image's source property.

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.utils.Base64Decoder;

            private function init():void {
                var b64png : String = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==";
                var decoder : Base64Decoder = new Base64Decoder();
                decoder.decode(b64png);
                var bytes : ByteArray = decoder.flush();
                img.source = bytes;
            }
        ]]>
    </mx:Script>
    <mx:Image id="img" />
</mx:Application>