Image not removed when src set to null

[justinmclean]

This code in the Flex SDK

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               applicationComplete="init()">

    <fx:Script><![CDATA[
       public function blankimage():void {
           image.source = null;
       }
     ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <mx:Image id="image" source="https://www.apache.org/foundation/press/kit/asf_logo_url.png" width="50%" height="50%" />
    <mx:Button label="Blank" click="blankimage()" />
</s:Application>

Will blank out the image when the Blank button is pressed and the images's source set to null.

Similar code in RoyaleJS:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/royale/basic">

    <fx:Script><![CDATA[
           public function blankimage():void {
               image.src = null;
           }
        ]]></fx:Script>

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl/>
    </js:valuesImpl>

    <js:initialView>

        <js:View>
            <js:Container id="startPage" visible="true" width="100%">
                <js:beads>
                    <js:VerticalLayout />
                </js:beads>
                <js:Image id="image" src="https://www.apache.org/foundation/press/kit/asf_logo_url.png" width="50%" height="50%" />
                <js:TextButton text="Blank" click="blankimage()" />
            </js:Container>
        </js:View>
    </js:initialView>

</js:Application>

Fails to blank out the image.

There's obviously a few work arounds (i.e. setting visibility) but I've run into issues with slow loading images where the wrong images displayed to the user in an application.

[Harbs]

There's no way to set an image have no source in HTML. If the src is empty, it shows as a broken image.

The best you can do is set it to a tiny transparent image: https://stackoverflow.com/questions/19126185/setting-an-image-src-to-empty

So there's no good way of fixing this on the framework level that I know of. You can probably set visibility to false and use a load event listener to make it show again.

[justinmclean]

Have a look about it seems that this works reasonably well (on the JS side). image.src = "//:0";

(i.e. a request at the same protocol and url on port zero)

I had 1/2 expected this to work: image.src = "about:blank";

but it gives a broken image symbol in Chrome.

I have not tested on all browsers or on the AS side.

[justinmclean]

BTW Image doesn't have any public image load handler that I can see.

[Harbs]

Sorry. I wasn't clear. layoutNeeded is dispatched when an image is loaded. You can listen to that.

[justinmclean]

This code fails to compile:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/royale/basic">

    <fx:Script><![CDATA[
        import org.apache.flex.events.IEventDispatcher;

        public function blankimage():void {
            image.visible = false;
            image.src =  "https://www.apache.org/foundation/press/kit/poweredBy/Apache_PoweredBy.png";
        }
        public function showImage():void {
            image.visible = true;
        }
        ]]></fx:Script>

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl/>
    </js:valuesImpl>

    <js:initialView>

        <js:View>
            <js:Container id="startPage" visible="true" width="100%">
                <js:beads>
                    <js:VerticalLayout />
                </js:beads>
                <js:Image id="image" src="https://www.apache.org/foundation/press/kit/asf_logo_url.png" width="50%" height="50%" layoutNeeded="showImage()" />
                <js:TextButton text="Blank" click="blankimage()" />
            </js:Container>
        </js:View>
    </js:initialView>

</js:Application>

With this error:

/Users/justinmclean/IdeaProjects/FlexJSTest/src/ImageBlank.mxml(26): col: 130 This attribute is unexpected. It will be ignored.

                <js:Image id="image" src="https://www.apache.org/foundation/press/kit/asf_logo_url.png" width="50%" height="50%" layoutNeeded="showImage()" />

I assume the only way to do this would be to add a hard coded event listener manually like so?

    <fx:Script><![CDATA[        
        public function blankimage():void {
            image.visible = false;
            image.src =  "https://www.apache.org/foundation/press/kit/poweredBy/Apache_PoweredBy.png";
            image.addEventListener("layoutNeeded", showImage);
        }

        public function showImage(event:Event):void {
            image.visible = true;
        }
        ]]></fx:Script>

[Harbs]

Have a look about it seems that this works reasonably well (on the JS side). image.src = "//:0";

That blanks the image, but keeps the size. Is that what happened in Flex? I wouldn't have thought so. It seems weird to keep the dynamic size of an image once it's blanked.

[justinmclean]

Yes Flex kept the size if you set source=""