Having trouble loading images from external XML with states in AS3

Question

I am using states to show different types of media when I go to different states throughout my application. I am working on the image state and I can get the data from my XML to show up in my data grid I have laid out and show the name of the image I am viewing when I click it, however the image is not displayed. Here is my code now:

    <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    <fx:XML id="images" source="img_data/images.xml" />
    <s:XMLListCollection id="imageCollection" source="{images.IMAGE}" />
</fx:Declarations>
<s:HGroup>
    <s:DataGrid id="imageGrid" dataProvider="{imageCollection}" click="onClick()" />

    <s:VGroup height="55">
        <s:Label text="Now viewing: {imageGrid.selectedItem.@name}" />
        <s:Label id="txtPosition" width="91"/>
    </s:VGroup>

</s:HGroup>
<fx:Script>
    <![CDATA[
        import mx.controls.Image;

        public var newImage:Image;
        public var myXML:XML;
        [Bindable]public var myURLLoader:URLLoader = new URLLoader;



        public function onClick():void{
            newImage = new Image();
            newImage.load(new URLRequest(imageGrid.selectedItem.file.toString()));
            newImage.addEventListener(Event.COMPLETE, processXML);

            newImage.source = images.IMAGE.@src;
        }

        public function processXML(e:Event):void{
            myXML = new XML(e.target.data);
                //newImage = new Image();

                newImage.height = 200;
                newImage.width = 400;
                imgGroup.addElement(newImage);

        }


    ]]>
</fx:Script>

And my XML file I am pulling from:

<?xml version="1.0" encoding="utf-8"?>
<GALLERY COLUMNS="5" XPOSITION="30" YPOSITION="30" WIDTH="100" HEIGHT="100">
<IMAGE name="Cabin in the Woods" >
<file>img_data/cabin.jpg </file>
</IMAGE>
<IMAGE name="Batman" src="img_data/batman.jpg" >
<file>img_data/batman.jpg</file>
</IMAGE>
<IMAGE name="Christmas Vacation">
<file>img_data/christmasVacation.jpg</file>
</IMAGE>
<IMAGE name="Inception">
<file>img_data/inception.jpg</file>
</IMAGE>
</GALLERY>

Answer 1

First, you should load your XML with an URLLoader, not an Image.

    public function onClick():void{
        myURLLoader.load(new URLRequest(imageGrid.selectedItem.file.toString()));
        myURLLoader.addEventListener(Event.COMPLETE, processXML);
    }

You should not set the image's source before actually reading it from the XML.

    public function processXML(e:Event):void{
        myXML = new XML(e.target.data);
        newImage = new Image();
        newImage.source = myXML.IMAGE[0].file.text();
        imgGroup.addElement(newImage);
    }

I put arbitrarily a [0] because I don't know which IMAGE you wanted to load from your XML.