flex 4 - image not adding to UIComponenet - image

Question

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"?>
<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

Answer 1

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