Dynamically assigning an image source in an item renderer does not work in Flex/AS3

Question

I have a custom item renderer that displays images:

<mx:DataGrid dataProvider="{friends.friend}" id="friendsGrid" width="240" 
     rowCount="3" variableRowHeight="true" headerHeight="0" 
     horizontalCenter="true" backgroundAlpha="0" borderThickness="0"
     useRollOver="false" selectable="false">
     <mx:columns>

      <mx:DataGridColumn width="80" paddingLeft="20">
       <mx:itemRenderer>
              <mx:Component>
                  <mx:HBox height="50" horizontalAlign="center" 
                   verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                      <mx:Image  source="{outerDocument.getProfilePic(data)}"/>
                  </mx:HBox>
              </mx:Component>
          </mx:itemRenderer>
         </mx:DataGridColumn>

        </mx:columns>
    </mx:DataGrid>

And a function getProfilePic:

public function getProfilePic(data:Object):String{
       if(String( data.image_path.text() ) == ""){
        return "../assets/no_profile_pic.png";
       }else{
        return data.image_path;
       }
      }

The issue is that when I assign the "no profile pic" image, it does not show up. I get that funny looking "image cannot be found" icon in place. If I place an image in ../assets on my server, the image shows up. Embedding is more ideal. So the question is...how do I embed an image in this case?

Answer 1

Maybe try this:

<mx:itemRenderer>
    <mx:Component>
        <mx:HBox height="50" horizontalAlign="center" verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off">
            <mx:Script>
                <![CDATA[
                    override public function set data(value:Object):void
                    {
                        super.data = value;

                        if(String(data.image_path.text()) == ""){
                            profileImage.load("../assets/no_profile_pic.png");
                        }
                        else{
                            profileImage.load(data.image_path);
                        }
                    }
                ]]>
            </mx:Script>

            <mx:Image id="profileImage" />
        </mx:HBox>
    </mx:Component>
</mx:itemRenderer>