actionscript-3 - スクローラーに画像を動的に追加する

Question

ファイル参照を使用してフレックスに画像を動的に追加しようとしています。スクローラーに画像を追加する必要があります。以下のコードを使用しますが、画像を追加しても表示されませんでした。この問題について誰か助けてください。よろしくお願いします。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               xmlns:net="flash.net.*">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.Image;
            import mx.utils.ObjectUtil;
            private var myImage:Image;
            private function OnbuttonClick(evt:MouseEvent):void {
                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                fileReference.browse(arr);
            }

            private function FileRefSelect(evt:Event):void {
                fileReference.load();
            }

            private function FileRefComplete(evt:Event):void {
                Alert.show(ObjectUtil.toString(fileReference));
                myImage             = new Image();
                //img.source = fileReference.data;

                myImage.maxWidth    = 100;
                myImage.maxHeight   = 100;
                myImage.source      = fileReference.data;
                vg.addChild(myImage);

            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <net:FileReference id="fileReference"
                           select="FileRefSelect(event);"
                           complete="FileRefComplete(event);" />
    </fx:Declarations>



    <mx:ControlBar>
        <mx:Button id="btn" label="Browse Your Image"  click="OnbuttonClick(event);" />
    </mx:ControlBar>

    <s:Scroller id="scrllr" x="50" y="100" width="100" height="280" focusEnabled="false"
                hasFocusableChildren="true">
        <s:VGroup id="vg">

        </s:VGroup>
    </s:Scroller>


</s:Application>