title: Dynamically assigning an image source in an item renderer does not work in Flex/AS3
body: <p>I have a custom item renderer that displays images:</p>
  
  <pre><code>&lt;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"&gt;
          &lt;mx:columns&gt;
  
              &lt;mx:DataGridColumn width="80" paddingLeft="20"&gt;
                  &lt;mx:itemRenderer&gt;
                      &lt;mx:Component&gt;
                          &lt;mx:HBox height="50" horizontalAlign="center" 
                              verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off"&gt;
                              &lt;mx:Image  source="{outerDocument.getProfilePic(data)}"/&gt;
                          &lt;/mx:HBox&gt;
                      &lt;/mx:Component&gt;
                  &lt;/mx:itemRenderer&gt;
              &lt;/mx:DataGridColumn&gt;
  
          &lt;/mx:columns&gt;
      &lt;/mx:DataGrid&gt;
  </code></pre>
  
  <p>And a function getProfilePic:</p>
  
  <pre><code>public function getProfilePic(data:Object):String{
                  if(String( data.image_path.text() ) == ""){
                      return "../assets/no_profile_pic.png";
                  }else{
                      return data.image_path;
                  }
              }
  </code></pre>
  
  <p>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?</p>