5 Replies Latest reply on Mar 1, 2009 12:07 PM by flexnoob17

    No images in Firefox

    flexnoob17
      I am somewhat new to flex, and my question feels extremely stupid and simple but i can't figure it out. I created a site that uses a simple timer to rotate through images whos location is provided by a PHP doc and XML In IE the site works perfect. In Firefox show the broken image icon. Tried searching everywhere can't find a reason why? For the file location i am using "assets/images/image1.jpg" for the image source. But I have tried "..assets/images/image1.jpg" and every other possible image source string I can think of and nothing is working in firefox, and it works in IE. Also when testing locally with firefox it works, but not after posting the site it does not work. I have tried different computers and it still works with IE but not firefox. Much thanks in advance for the help!
        • 1. Re: No images in Firefox
          flexnoob17 Level 1
          no help.. has anyone else had this problem.
          • 2. Re: No images in Firefox
            injpix Level 3
            Install Firebug in Firefox if you haven't already, to monitor the HTTP headers and see if the paths are coming in as expected. Also have you read this thread?
            • 3. Re: No images in Firefox
              flexnoob17 Level 1
              I read the thread in the post, I don't think I am passing bad urls. I tested with firebug, and still not having any luck finding the error.

              Ok here is the code, of the component in question.

              What I don't get, is the http service works in both browsers without any problem. but the images only load in IE not FF

              for the image source path I have tried both the relative in the code below, and also with an absolute path of http://www.mysite.com/images/Splashscrn/. Both work fine in IE but not in FF.

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="700" height="100%" creationComplete="init();">

              <mx:Script>
              <![CDATA[
              import mx.collections.XMLListCollection;
              import mx.rpc.events.ResultEvent;
              import flash.trace.Trace;
              import flash.utils.Timer;
              import flash.events.TimerEvent;
              import mx.collections.SortField;
              import mx.collections.Sort;
              import mx.collections.ListCollectionView;

              private function init():void{
              splashScrnData.send();
              }

              [Bindable]
              private var splashXML:XML;

              private var splashXMLCol:XMLListCollection;

              private var fileLoc:String = "images/Splashscrn/";
              private var fname:String;


              [Bindable]
              private var totalFile:String;

              private function xmlReturnedHandler(event:ResultEvent):void {

              splashXML = new XML(splashScrnData.lastResult);
              splashXMLCol = new XMLListCollection(splashXML.splashid);

              splashXMLCol = filterXML(sortXML(splashXMLCol));


              }

              private function startTimer():void {
              myTimer.addEventListener(TimerEvent.TIMER,newScrn);

              myTimer.start();
              }

              private var fileID:int = 0;
              private var delay:uint = 8000;
              private var repeat:uint = 0;
              private var myTimer:Timer = new Timer(delay, repeat);



              private function newScrn(e:TimerEvent):void {

              var fileIDMax:int = splashXMLCol.length;



              if (fileID < fileIDMax)
              {

              splScrn.addEventListener(Event.COMPLETE, ldcomp);
              splScrn.visible = false;
              totalFile = fileLoc + splashXMLCol[fileID].fileid;
              splScrn.source = totalFile;
              splScrn.load();

              fileID++;
              }
              else {
              myTimer.stop();
              fileID = 0;
              startTimer();;
              }
              }

              private function sortXML(myXML:XMLListCollection):XMLListCollection {
              //Create a Sort object.
              var sortA:Sort = new Sort();
              // Sort first on the area field, then the label field.
              // The second parameter specifies that the sort is case-insensitive.
              // A true third parameter specifies a descending sort.
              sortA.fields=[new SortField("place", true)]
              myXML.sort=sortA;
              //Refresh the collection to show the sort.
              myXML.refresh();

              return myXML;
              }

              private function filterXML(myXML:XMLListCollection):XMLListCollection {
              myXML.filterFunction=stateFilterFunc;
              /* Refresh the collection view to apply the filter. */
              myXML.refresh();
              splScrn.addEventListener(Event.COMPLETE, ldcomp);
              splScrn.visible = false;
              totalFile = fileLoc + myXML[fileID].fileid;
              fileID++;
              splScrn.source = totalFile;
              splScrn.load();
              startTimer();
              return myXML;
              }

              private function stateFilterFunc(item:XML):Boolean {
              return item.selected == "1";
              }

              private function ldcomp(e:Event):void {
              splScrn.visible = true;
              }

              ]]>


              </mx:Script>

              <mx:Fade id="myFade" duration="1000"/>

              <mx:HTTPService id="splashScrnData" method="GET" url=" http://www.mysite.com/phpScripts/SplashData.php" resultFormat="e4x"
              contentType="application/xml" result="xmlReturnedHandler(event)"/>

              <mx:VBox verticalAlign="middle" horizontalAlign="center" verticalScrollPolicy="off" width="100%" height="100%">
              <mx:Image id="splScrn" width="100%" height="90%" autoLoad="true"
              scaleContent="true" completeEffect="{myFade}" >
              </mx:Image>
              </mx:VBox>
              </mx:Canvas>

              I know the coding isn't pretty, or as efficient as it could be. But this problem is killing me. Am I missing something in the wrapper file?

              Here is the HTML Code from Firebug

              <html lang="en">
              <head>
              <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
              <link href="history/history.css" type="text/css" rel="stylesheet">
              </link>
              <title>www.mysite.com</title>
              <base href=" http://www.mysite.com"/>
              <script language="javascript" src="AC_OETags.js">
              </script>
              <script language="javascript" src="history/history.js">
              </script>
              <style>
              </style>
              <script type="text/javascript" language="JavaScript">
              </script>
              </head>
              <div id="_firebugConsole" style="display: none;" FirebugVersion="1.3.3"/>
              <body scroll="no">
              <script type="text/javascript" language="JavaScript">
              </script>
              <embed id="index" height="100%" width="100%" align="middle" type="application/x-shockwave-flash" swliveconnect="true" pluginspage=" http://www.adobe.com/go/getflashplayer" allowscriptaccess="sameDomain" name="index" bgcolor="#000000" quality="high" src="index.swf"/>
              <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="index" width="100%" height="100%" codebase=" http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="index.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#000000" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="index.swf" quality="high" bgcolor="#000000" width="100%" height="100%" name="index" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" http://www.adobe.com/go/getflashplayer" SWLIVECONNECT="true"> </embed> </object> </noscript>
              <div id="firefox_anchorDiv"/>
              </body>
              </html>
              • 4. Re: No images in Firefox
                Francisc Level 3
                Are you absolutely certain it works in IE and not FireFox? IE has the bad habbit of caching flash files for long periods. It happened to me when I was testing both in Chrome and IE. On IE it was working but not on Chrome. This was because I changed a "../" in the file path by mistake and while it was working in IE, it stopped working in Chrome. This was because Chrome usually reloads SWFs without need of clearing all the cache and IE does not.

                Try to clean the IE cache completly, even settings stored by add-ons, then see if it works still. Normally if it does not work in one 'consacrated' browser it should not work in any browser when it comes to smaller issues such as loading an Image.

                Also be sure the file path is correct, I use the Alert.show(varWithFilePath) to see what the path is if it is dynamical or sent via PHP. (You'll need to import the Alert class.)

                Good luck!
                • 5. Re: No images in Firefox
                  flexnoob17 Level 1
                  I wanted a 3rd opinion so I downloaded and tested the site in Chrome, and it worked fine. just like in IE. It seems not to work in FF. I do not think its a cache problem I have tested the site on multiple machines with the same results. I think this is a path problem? Is there something in the wrapper file that I am missing for FF? This problem is really annoying for such a simple task.