Problem adding an image to the display list

Question

I'm trying to create a component to add images to a Panel (id=hbox). I seem to be loading the images successfully (because the trace statement works), but can't add them to the display.
I'm using the following line of code, but getting an error:
hbox.addChild(event.currentTarget)
What am I doing wrong?
Thank you!
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha=".5"   backgroundColor="0xffffff" creationComplete="init()"  >
    <mx:Script>
    <![CDATA[
    public function placeAnimals():void{
        for(var i:int=0; i<12;i++){
            var imageLoader:Loader = new Loader();
            var url:String = "images/animal"+i+".png";
            var urlReq:URLRequest = new URLRequest(url);
            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
            imageLoader.x=50*i
            imageLoader.load(urlReq);       
            function imageLoaded(event:Event):void {
                trace("Success="+event.currentTarget.url)
               //hbox.addChild(event.currentTarget)
         public function init():void {
             placeAnimals()
    ]]>
    </mx:Script>
    <mx:Panel  id="hbox"  height="200"   backgroundImage="images/smallWhitePanel.png"  borderStyle="none" />
</mx:Canvas>

Answer 1

You cannot add an image directly like that... why not dot the following
var img:Image = new Image();
img.source = url;
this.addChild(img);
hpefully it should work.. i'v neva seen image being added to the hbox like that... it will work only if you embed it / put it in source element..
the following link should help you
http://livedocs.adobe.com/flex/3/html/help.html?content=controls_16.html