Setting a custom broken image skin for the Image control in Flex

The following example shows how you can set a custom broken image skin for the Flex Image control by setting the brokenImageSkin style.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2008/03/02/setting-a-custom-broken-image-skin-for-the-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private var alert:Alert;
 
            private function image_ioError(evt:IOErrorEvent):void {
                alert = Alert.show(evt.text, evt.type);
            }
 
            private function loadImage(src:String):void {
                image.source = src;
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        Image {
            brokenImageSkin: Embed("assets/flex_logo.jpg");
        }
    </mx:Style>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Good"
                click="loadImage('assets/flashplayer_icon.jpg');" />
        <mx:Button label="Bad"
                click="loadImage('assets/404.gif');" />
    </mx:ApplicationControlBar>
 
    <mx:Image id="image"
            maintainAspectRatio="true"
            scaleContent="false"
            width="200"
            height="200"
            ioError="image_ioError(event);" />
 
</mx:Application>

View source is enabled in the following example.

4 thoughts on “Setting a custom broken image skin for the Image control in Flex

  1. Thanks for the example. It really helps me. I had an issue with setting height and with for the custom brokenImage. I used the brokenImageSkin parameter, but it renders the image at its true resolution, which ends up cutting off the image if the size of the control is constrained. Could you please guide me how can I scale the brokenImageSkin to a custom width and height? If you provide me an example on this issue it will be great.

Comments are closed.