Rendering Images from a s:Arraylist and datagroup

Question

Ok, I have one last problem that is perplexing me.  I am seeing the following when I run my application:
In my code I have main.mxml:
<fx:Declarations>
          <!--<mx:HTTPService id="mediaData" url="http://www.serco-hrc.com/SNAmedia/pictures.xml" />-->
          <s:ArrayList id="tempData">
               <fx:String>1 Picture</fx:String>
               <s:BitmapImage source="SNA_media/pictures/1.jpg"/>
               <fx:String>2 Picture</fx:String>
               <s:BitmapImage source="SNA_media/pictures/2.jpg"/>
               <fx:String>3 Picture</fx:String>
               <s:BitmapImage source="SNA_media/pictures/3.jpg"/>
               <fx:String>4 Picture</fx:String>
               <s:BitmapImage source="SNA_media/pictures/4.jpg"/>
          </s:ArrayList>
     </fx:Declarations>
     <s:HGroup left="10" top="78" width="100%">
          <s:Panel id="thumbsPanel" title="Thumbnails">
               <s:DataGroup id="mediaGroup" dataProvider="{tempData}" itemRenderer="components.NameDisplay">
                    <s:layout>
                         <s:VerticalLayout useVirtualLayout="true" />
                    </s:layout>
               </s:DataGroup>
               <s:VScrollBar right="0" height="100%" viewport="{mediaGroup}"/>
          </s:Panel>
          </s:HGroup>
There are other panels within my HGroup that have been commented out and have nothing to do with my issue here.  In my components.NameDisplay:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    autoDrawBackground="true">
     <fx:Script>
          <![CDATA[
               import spark.skins.spark.DefaultComplexItemRenderer;
               import spark.skins.spark.DefaultItemRenderer;
               private function rendererFunction(item:Object):ClassFactory {
                    if (item is String) {
                         return new ClassFactory(NameDisplay);
                    } else {
                         return new ClassFactory(DefaultComplexItemRenderer);
          ]]>
     </fx:Script>
     <s:states>
          <s:State name="normal"/>
          <s:State name="hovered"/>
     </s:states>
     <s:Image width="100" height="100"
                source="{data.source}"
                horizontalAlign="center" verticalAlign="middle"></s:Image>
     <s:Label text="{data}"
                height="30" width="40"
                color="black" textAlign="center"
                verticalAlign="middle"></s:Label>
</s:ItemRenderer>
My images are coming from a Linked folder within my project as in:
After all this, I thought I did everything correctly.  Why are my images not showing up when I run my application?????
Tony

Answer 1

I finally figured out that I will have to absolute address my images within my s:ArrayList.  I thought I could use a project "linked folder" as a go-between, but that schema is not working as I envisioned. So my arraylist now looks like:
<s:ArrayList id="tempData">
               <fx:String>1 Picture</fx:String>
               <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\1.jpg"/>
               <fx:String>2 Picture</fx:String>
               <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\2.jpg"/>
               <fx:String>3 Picture</fx:String>
               <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\3.jpg"/>
               <fx:String>4 Picture</fx:String>
               <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\4.jpg"/>
Atleast my images are now displaying in the panel. Now if I could figure out why that "[Object Bitmap" text is showing up over the top of my images.
Any suggestions???  I have not changed anything in my code, yet.
Tony