Using image while creating custom components in flex

For my AIR based application I am trying to create a custom component based on canvas which has an image (as shown below).

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" cornerRadius="5" borderStyle="solid" borderThickness="2" dropShadowEnabled="true" borderColor="#EDEDE8" dropShadowColor="#dddddd" shadowDistance="5" shadowDirection="center">
<mx:Script>
    <![CDATA[
        public var path:String = "";
    ]]>
</mx:Script>
<mx:Image id="tileImage" maintainAspectRatio="false" buttonMode="true" useHandCursor="true" source="{path}" width="100%" x="0" height="100%" y="0"/>
<mx:Canvas left="3" top="3" bottom="3" right="3" borderStyle="solid" cornerRadius="5" borderThickness="1" borderColor="#EDEDE8" alpha="0.75">
</mx:Canvas>

I am binding the source of the image with the public variable path. And when I am trying to place this component in my main mxml file like below and provide the 'path' to it, I am unable to see any image loading in the custom component. It remains blank.

var component:MyCustComponent = new MyCustComponent();
component.path = 'path/to/image.jpg';
addChild(component);

As a work around, I am trying to add an creationComplete listener to the canvas in my custom component and used to give titleImage.source = this.path . This made it work correctly but it doesn't help me i开发者_Python百科f I have to keep changing the image or when the path of the image fetched using some async call. So, I would like to know if there's any alternative to fix this problem. Thanks!!

Looks like you are just missing the bindable metatag for path. for your path declaration try:

[Bindable]
public var path:String;