+ Start a Discussion

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:


While javascript file's URL is right:



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




P.S. A similar issue was raised here


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'];


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" />


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:


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(){  
                               //look only once in DOM and cache it  
                                 oImage  =  window.document.getElementById("imgHolder");  
                              oImage.src  =  aImages[(++iIdx)%(aImages.length)];  
                               //some error handling here  
Problem is image is not show on page