flex 4 - image not adding to UIComponenet

I am trying to load an image dynamically to the Image control and then add it to a sprite and add the sprite to the UIComponent.

<?xml version="1.0" encoding="utf-8"?>开发者_如何学Go
<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"
           applicationComplete="init()">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
<fx:int id = "_rows" />
<fx:int id = "_cols" />     

</fx:Declarations>
<s:layout>
    <s:VerticalLayout>

    </s:VerticalLayout>

</s:layout>
<fx:Script>
    <![CDATA[
        import as3isolib.geom.Pt;
        import as3isolib.utils.IsoDrawingUtil;

        import mx.controls.Alert;
        import mx.core.IVisualElement;

        private var sprite:Sprite;
        [Binable]
        private var imgUrl:String = "http://localhost/greenrev/images//marketitems/menu_houses.png";
        //[Bindable]
//          private var _rows:int = 1;
//          //[Bindable]
//          private var _cols:int = 1;
        private var _cellSize:int=40;

        private function init(){

            sprite = new Sprite();
            //Alert.show(sprite.numChildren.toString());
            imgContainer.addChild(sprite);
            //Alert.show(sprite.numChildren.toString());

            loadImage(imgUrl);

        }

        private function loadImage(url:String):void{

            //img.source = url;
            img.load(url);

        }

        private function loadingComplete(event:Event):void{

            if (sprite.numChildren>0){
                sprite.removeChildAt(0);
            }

            sprite = new Sprite();
            sprite.addChild(img);
            sprite.cacheAsBitmap = true;
            sprite.graphics.clear();
            sprite.graphics.beginFill(0xffff00, 0.3);
            _rows = int(rows.text);
            _cols = int(cols.text);
            Alert.show(_rows.toString() + "," + _cols.toString());
            IsoDrawingUtil.drawIsoRectangle(sprite.graphics,new Pt(0,0),_cellSize * _rows,_cellSize * _cols);
            sprite.graphics.endFill();

            if (imgContainer.numChildren>0){
                imgContainer.removeChildAt(0);
            }

            imgContainer.addChild(sprite);
//              imgContainer.addChild(img);
            //Alert.show("loading complete");

        }

        private function loadingFail(event:IOErrorEvent):void{

            Alert.show(event.text);

        }

    ]]>
</fx:Script>
<s:BorderContainer id="main"  verticalCenter="-244" horizontalCenter="-422" width="80%" height="90%">
    <s:layout>
        <s:VerticalLayout verticalAlign="middle" horizontalAlign="center">

        </s:VerticalLayout>
    </s:layout>
    <s:BorderContainer>
        <mx:UIComponent id="imgContainer">

        </mx:UIComponent>
    </s:BorderContainer>

    <s:BorderContainer>
        <s:layout>
            <s:HorizontalLayout>

            </s:HorizontalLayout>
        </s:layout>
        <s:VGroup>
            <s:TextInput id="rows"  minWidth="100" text = "{_rows}"/>
            <s:TextInput id = "cols" minWidth="100" text = "{_cols}"/>
            <s:TextInput id = "txtImgUrl" minWidth="400" text="{imgUrl}"/>
            <s:Button label="Refresh" click="loadImage(imgUrl)"/>

        </s:VGroup>


    </s:BorderContainer>

</s:BorderContainer>

<mx:Image id="img" complete="loadingComplete(event)" visible="true" ioError="loadingFail(event)">

</mx:Image>

</s:Application>

I have no clue why the image is not being shown. Like you can see, I am trying to add the image after the COMPLETE event occurs. Please help

I changed the URL to "http://horses-bg.net/wp-content/uploads/2009/11/2752_beloved-horses.jpg" and the image appeared. I've also commented out the IsoDrawingUtil.drawIsoRectangle(..) cause i don't have the lib you're using. The problem might be in your URL or in that IsoDrawingutil thing :]

Hope this helps,

Good luck!

Blaze