function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ShamilShamil 

Reference an image from javascript in a static resource

I have a zip file that contains a javascript file and an image uploaded as a static resource.

My javascript needs to reference the image:

 

var myVar{

myImage: 'myImage.gif'

};

 

Problem is that on a Visual force page, when I include my static resource, image's URL is not resolved properly, it is:

https://c.cs4.visual.force.com/apex/images/myImage.gif

While javascript file's URL is right:

https://c.cs4.visual.force.com/resource/timeStamp/myJsFile.js

 

How do I reference the image from javascript so that it's URL is properly resolved?

 

Thanks!

 

P.S. A similar issue was raised here

Pradeep_NavatarPradeep_Navatar

You can reference the JS file in static resource by using apex and visual force code.

 

Tryout this sample code to reference the image on a page:

 

Controller Code:


String strJS;

Long iCnt=0;

StaticResource objStc=[Select s.LastModifiedDate,s.NamespacePrefix  From StaticResource s where s.Name='Site_Themes'];

iCnt=objStc.LastModifiedDate.getTime();

if(objStc.NamespacePrefix == null || objStc.NamespacePrefix == '')

{           

      strCSS = '/resource/'+iCnt+'/Site_Themes/Site_Themes/css/';

      strJS = '/resource/'+iCnt+'/Site_Themes/Site_Themes/js/';

}

global public String getCSSURL(){return strCSS;}

global public String getJSURL(){return strJS;}

 

VF Code:

 

<script src="{!JSURL}lib/jquery.toggleVal.js"></script>

<script src="{!JSURL}actions.js" />
ShamilShamil

Predeep, thanks, but you answered a different question.

My question is about referencing components within the same static resource: I have a javasript and an image both in the same zip file which is uploaded as a static resource. I want to get a handle of the image in my javascript code.

Note - it is possible to reference an image from a css file:

background-image: url(images/nav/header.jpg)

there's a magic 'url' function that resolves the url

Now, based on my research I don't think it is possible to reference an image from javascript [again - buth are static resources!] Workaround is:  call the javascript code and pass image URL as a parameter: 

 

myJsFunction("{!URLFOR($Resource.myResource, 'images/image.gif')}")
Shailendra Kumar 17Shailendra Kumar 17
 <script type="text/javascript">  
                         \*************priblem area**********/
 var aImages  = [ '<apex:image url="{!URLFOR($Resource.shop,'shop/images/slide01.jpeg')}" width="50" height="50"/>',
                                             '<apex:image url="{!URLFOR($Resource.shop,'shop/images/slide02.jpeg')}" width="50" height="50"/>',
                                            '<apex:image url="{!URLFOR($Resource.shop,'shop/images/slide03.jpeg')}" width="50" height="50"/>',
                                             '<apex:image url="{!URLFOR($Resource.shop,'shop/images/slide04.jpeg')}" width="50" height="50"/>',
                                            '<apex:image url="{!URLFOR($Resource.shop,'shop/images/slide05.jpeg')}" width="50" height="50"/>'
                                             ];  
    /**************************************************/
                           var oImage   =  null;  
                           var iIdx     =  0;  
                           function play(){  
                             try{  
                               //look only once in DOM and cache it  
                               if(oImage===null){  
                                 oImage  =  window.document.getElementById("imgHolder");  
                              }  
                              oImage.src  =  aImages[(++iIdx)%(aImages.length)];  
                               setTimeout('play()',5000);  
                             }catch(oEx){  
                               //some error handling here  
                             }  
                           } 
                           </script>
Problem is image is not show on page