6 Replies Latest reply on Aug 10, 2009 10:43 PM by sk12380

    Loading local images into HTML component

    Tarindel
      I need to intermix text and images for a project I'm working on, and using htmlText seems the best way to do it. However, I can't get it to work when the images are loaded from the local file system.

      It seems to work fine with remote images:

      <mx:HTML x="480" y="191" width="256" height="315">
      <mx:htmlText>
      <![CDATA[
      <p>Image: <img src=' http://knight.fb.hive7.com/res/img/ico/x32/coin.gif' ></p>
      ]]>
      </mx:htmlText>
      </mx:HTML>

      But not with local images:

      <mx:HTML x="480" y="191" width="256" height="315">
      <mx:htmlText>
      <![CDATA[
      <p>Image: <img src='../assets/coin.gif' ></p>
      ]]>
      </mx:htmlText>
      </mx:HTML>

      Anybody have any ideas or workarounds?
        • 1. Loading local images into HTML component
          Tarindel Level 1
          I hate posting these things, because every time I do I find a solution almost immediately afterward. Heh.

          Here's the solution, for anybody else encountering this issue with Air 1.5.

          On application init, do the following:

          browser.htmlLoader.placeLoadStringContentInApplicationSandbox = true;

          (browser is the name of my HTML component)

          Now it seems to work fine.
          • 2. Loading local images into HTML component
            DilutedImage_
            Thank you for taking the time to update this. I was having this same problem, and am happy to now have the solution.
            • 3. Re: Loading local images into HTML component
              Typidee Level 1

              This did the trick for me for external CSS references from within an <mx:HTML> control.  Thanks!

              • 4. Re: Loading local images into HTML component
                sk12380

                Hi,

                 

                I tried your solution, it did not worked, it gave me following error -

                ==========

                ReferenceError: Error #1056: Cannot create property placeLoadStringContentInApplicationSandbox on mx.core.FlexHTMLLoader.
                    at com.exa.view::TestView/changeEvt()[/home/sachin/workspace/newed/src/com/exa/view/TestView .mxml:70]
                    at com.exa.view::TestView/__toctree_change()[/home/sachin/workspace/newed/src/com/exa/view/T estView.mxml:89]
                    at flash.events::EventDispatcher/dispatchEventFunction()
                    at flash.events::EventDispatcher/dispatchEvent()
                    at mx.core::UIComponent/dispatchEvent()[C:\autobuild\3.3.0\frameworks\projects\framework\src \mx\core\UIComponent.as:9308]
                    at mx.controls.listClasses::ListBase/mouseUpHandler()[C:\autobuild\3.3.0\frameworks\projects \framework\src\mx\controls\listClasses\ListBase.as:8989]
                    at mx.controls::List/mouseUpHandler()[C:\autobuild\3.3.0\frameworks\projects\framework\src\m x\controls\List.as:2279]
                    at mx.controls::Tree/mouseUpHandler()[C:\autobuild\3.3.0\frameworks\projects\framework\src\m x\controls\Tree.as:2952]

                 

                ===========

                 

                 

                Here is the code, the function gets called on change event of a tree component(not shown in code here)

                ===============

                <mx:Panel width= "70%" height="100%" id="cpanel" paddingBottom="10" paddingLeft="20" paddingTop ="20">
                        <mx:HTML id="htmlc" width="100%" height = "100%">
                           
                        </mx:HTML>
                    </mx:Panel>

                 

                <mx:Script>
                    <![CDATA[

                          public function changeEvt(event:Event):void{

                               htmlc.htmlLoader.placeLoadStringContentInApplicationSandbox = true;

                               htmlc.htmlLoader.loadString(rh.content.replace(/src="\/images/mg,'src="assets'));

                          }

                    }
                    ]]>
                </mx:Script>

                ================

                It would be helpful if you give more insight on your html component.

                Adobe air -version - 1.5

                 

                Thanks

                • 5. Re: Loading local images into HTML component
                  Jeff Swartz Level 3

                  Hey, sk12380, make sure that you are using the latest Flex SDK (which includes AIR 1.5). And be sure to set the namespace to 1.5 in your application descriptor file:

                   

                  <application xmlns="http://ns.adobe.com/air/application/1.5">

                  • 6. Re: Loading local images into HTML component
                    sk12380 Level 1

                    Thanks Jeff,

                     

                    Your tip was great!. Thanks for your valuable time.

                     

                    There is bug in linux flex builder alpha 4 eclipse plugin, it compiled the swf giving an error for 'placeLoadStringContentInApplicationSandbox' property.

                     

                    trace(htmlc.htmlLoader.hasOwnProperty('placeLoadStringContentInApplicationSandbox'))  reported - false. (..here htmlc is the mx:html component)

                     

                    I manually compiled with the same sdk(flex3.3/air 1.5.. which the eclipse plugin was using), it worked.

                     

                    However, to make it work I have to put an extra "app:/" before the URLs.

                    For e.g

                    <img src="app:/assets/...img.gif"/>

                    Images did not show up when I used something like <img src="../assets.."/> or <img src="app:../assets"/>

                    So I wonder how did it worked as shown in the solution of this problem few posts above.

                     

                    Anyway, Thanks all.

                    For linux users - Relying on solely flex builder alpha 4 linux plugin is not advisable, please try compiling manually if your app responds unexpectedly.