3 Replies Latest reply on May 10, 2011 6:52 AM by m1kal_

    Embeding an image at runtime

    l33tian Level 1

      Hi guys,



      Right from when i started using flex, i've always had problems with working with the image control. In working with static images, i use


      //AS3 snippet
      Public var image1:Class;
      Public var image2:Class;
      public function changeImage(event:Event):void
      //MXML snippet
      <s:Image id="imgCtrl" source="{image1}">
      <s:Button click="changeImage(event)">


      this works fine and i could even change the source property of the image to the second bitmap class at runtime, But now i'm working with images living on a web server, how do i embed this image on the image control


      What i'm actually doing is an upload form. When the upload button is clicked from flex, the user selects the image form the Operating System then the image is uploaded, when the upload is successful, the link to the image is returned back to flex. Now i have tried to use this link as the source property if the image control, it still doesnt work! I tested the image link directly on a browser and it points to the image without problems

      Any form of help will be appreciated



        • 1. Re: Embeding an image at runtime
          m1kal_ Level 2



          In my environment (a FLEX 4.5 desktop AIR project) the following is displaying the image :


          <s:Image source="http://www.adobe.com/images/shared/product_mnemonics/50x50/flash_50x50.gif" />


          Did you put the 'http' in front of your URL?

          If you're in a Flex Web environment and the domain you're requesting the image is not the same from the one you're launching your app, you're violating the security sandbox policies, to resolve that you have to set up a cross domain policy... (please see http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf6167e-7fff.html#WS2d b454920e96a9e51e63e3d11c0bf69084-7f11)




          • 2. Re: Embeding an image at runtime
            l33tian Level 1

            hello Mich


            That method is not a dynamic way of adding images. Infact My real problem was dynamically adding an image using the @Embed Statement. The reason i wanna do this is because i want the user to see what he has uploaded but i have found a way around it


            My initial approach was to upload the image first and return the server path back to my flex app then which i tried to assign the returned path as the source property of the image control which didnt work as i expected. But now i found out that the FileReference class(as of FPV10) has the load() method which loads  the image as a bytearrray in the FileReference's data Property...I use that and it work fine now! I didnt really need the server round trip to accomplish that!


            thanx anyways

            • 3. Re: Embeding an image at runtime
              m1kal_ Level 2

              Aaah ok!

              I'm glad you found a solution. Just for information you won't ever be able

              to embed an image at runtime (with a @Embed statement or what ever) as it is

              done at compilation time (it would mean you're modyfing the compiled binary

              at runtime !!!)


              So to display an Bitmap with a s:Image (same withe s:BitmapImage) :


              AIR remote from an HTPP server : <s:Image source="http://www.server.com/image.png"/>
              AIR local from disk : <s:Image source="new File(path/to/image).url"/>

              Flex from binary : <s:Image source="<reference to a bitmap ByteArray>"/> (the byte array can be obtained from a FileReference or from any Bitmap object)