9 Replies Latest reply on Mar 8, 2014 3:39 AM by Splurj

    Image Location


      When I insert images into my Edge Animate file it sets the path to the images to my local machine.  When I upload the files, images, and js files to the web the images are missing on my webpage because the path isn't looking at the images on my web server.  I can manually change the url path for the images with Firebug and the images appear, however it appears that one of the .js files is overriding the path back to the original image path.  Please help.

        • 1. Re: Image Location
          heathrowe Most Valuable Participant

          Edge Animate sets the image path relative to the project /images folder. So if you upload or copy your entire project from one location or server to another, it should function properly.


          Can you post a link to the project and/or a zip of the project files?



          1 person found this helpful
          • 2. Re: Image Location
            heath_honzell Level 1

            Here is a screenshot of the file structure on the web server.  The preload .js file is in this folder, and then the images are in the images folder.  When I published from Edge Animate I copied the entire web folder into this location, which included the images and edge_includes folder.  All of the header information appears to be loaded correctly.


            JS Snapshot.png

            • 3. Re: Image Location
              heathrowe Most Valuable Participant

              Your picture/capture is not showing properly!


              Can you try again, please.



              • 4. Re: Image Location

                If you need to set an absolute folder url, or you are pulling the content from a server that does not host the content, you can manually update the <projectname>_edge.js file to specify the directory:


                (function($, Edge, compId){

                //images folder

                var im='<SERVER/FOLDER>/images/';


                Just beware that if you re-publish the files, you'll need to redo any custom modifications.  I do this for off-server projects and it works very well so long as you make all the changes in each JS file where you need to specify the exact path.

                • 5. Re: Image Location
                  resdesign Adobe Community Professional & MVP

                  Good tip! I wish this could be done directly in Edge!

                  • 6. Re: Image Location
                    heath_honzell Level 1

                    I'm not sure I did this correctly. 

                    Here is the code from my God Still Heals_1080x100_edge.js file. 

                    My images are saved in this directory- /wp/wp-content/themes/mantra/js/images

                    And here is a link to the page I'm testing this on- http://i-witnessmusic.com/test-2/  The password to this page is jstest



                    //images folder

                    var im='<http://i-witnessmusic.com/wp/wp-content/themes/mantra/js>/images/';var _=null,y=true,n=false,x11='visible',c='color',x4='rgba(0,0,0,0)',lf='left',g='image',o='o pacity',e14='${_Heals}',e13='${_Still}',ql='linear',e10='${_Stage}',e12='${_God}',bg='back ground-color',x3='',x2='0.1.7',dt='Default Timeline',h='height',a='Base State',s='style',w='width',tp='top',x9='rgba(255,255,255,0.00)',ov='overflow',x8='stage', x1='1.0.0';var im='images/';var g6='Heals.png',g5='God.png',g7='Still.png';var fonts={};var P=Edge.P,T=Edge.T,A=Edge.A;var resources=[];var symbols={"stage":{v:x1,mv:x2,b:x3,bS:a,iS:a,gpu:n,rI:n,cn:{dom:[{id:'God',t:g,r:['0','115 px','184px','100px','auto','auto'],f:[x4,im+g5,'0px','0px']},{id:'Heals',t:g,r:['437px','0 ','269px','100px','auto','auto'],f:[x4,im+g6,'0px','0px']},{id:'Still',t:g,r:['197px','-10 0px','240px','100px','auto','auto'],f:[x4,im+g7,'0px','0px']}],sI:[]},s:{},tl:{"Default Timeline":{fS:a,tS:"",d:3000,a:y,tt:[]}}}};var S1=symbols[x8];var tl0=S1.tl[dt].tt,st1=S1.s[a]={},A1=A(_,tl0,st1);A1.A(e10).P(bg,x9,c).P(w,1080).P(h,100).P (ov,x11);A1.A(e12).P(tp,115).T(0,0,1,ql);A1.A(e13).P(lf,193).T(3,193).P(tp,-100).T(1,0,1,q l);A1.A(e14).P(lf,437).P(o,0,_,_,"").T(2,1,1,ql);Edge.registerCompositionDefn(compId,symbo ls,fonts,resources);$(window).ready(function(){Edge.launchComposition(compId);});})(jQuery ,AdobeEdge,"EDGE-735829");

                    • 7. Re: Image Location
                      heath_honzell Level 1

                      Here's a screenshot of how it looks when I manually change the path with firebug, which makes the image appear.JS Test.png

                      • 8. Re: Image Location
                        heathrowe Most Valuable Participant

                        Hi Heath (familiar name)


                        I see you a attempting to place your animation within a wordpress page/site, this plugin may be of help, and can save some time




                        1 person found this helpful
                        • 9. Re: Image Location
                          Splurj Level 1

                          I think I'm experiencing a similar problem.


                          Using the inspector it says 'failed to load the given URL' for the SVG image used in my animation. I'm also using Edge Suite and publishing my animation as a Deployment Package.


                          Should it import the SVG image when I import my .OAM file?

                          Where does it put it and why can't it find it?

                          Do I have to upload the image manually via FTP and edit the path to the image somehow, and how would I do that when the only thing that gets published is a .OAM file?


                          Hope you can help, thanks.


                          Screen Shot 2014-03-08 at 11.34.54.jpg