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
ravindraravindra 

How to reference an image file in a static resource javascript file?

Hi,

 

   I am developing a web application through visualforce. I have added a static resource javascript file which 

requires an image file to be called. I have put the images into /img folder and the javascript file(yyyyy.js) into /js folder and zipped folders into (XXXXXXX.zip) and added as a static resource with the name XXXXXXXZip

and added the code in my page as

 

 <script type="text/javascript" src="{!URLFOR($Resource.XXXXXXXZip, 'yyyyy.js')}"/>

 

But still i am not able to display the images.

 

Regards,

Ravindra

Best Answer chosen by Admin (Salesforce Developers) 
Br1Br1
Do you want a quick (and a little bit ugly) solution ?
define a global js variable with the path from the visualforce page :
<script>
var globalStaticResourcePath = '{!URLFOR($Resource.thenameofyourzipfile)}';
</script>

and inside the js, every time that you are going to put the img url , add the global url var, example:

(inside script.js that is in the zip file)
var imgpath = globalStaticResourcePath+'image.jpg';

This will do the job.

Br1.

All Answers

Br1Br1

Hi ravindra,

tho reference the images from the js , just use a relative path inside the static resource,

 

for example, resource.zip has this structure:

 /

 /img/photo.jpg

 /js/script.js

 

from script.js , to reference the photo.jpg the path is ../img/photo.jpg

 

br1

 

 
ravindraravindra

Thanks for the reply. But sorry to say dat it dint work.

 

I tried all the ways of relative path setting..

 

like ../img/photo.jpg

      ./img/photo.jpg

      /img/photo.jpg

      img/photo.jpg but still it din't get the image.

Br1Br1
Do you want a quick (and a little bit ugly) solution ?
define a global js variable with the path from the visualforce page :
<script>
var globalStaticResourcePath = '{!URLFOR($Resource.thenameofyourzipfile)}';
</script>

and inside the js, every time that you are going to put the img url , add the global url var, example:

(inside script.js that is in the zip file)
var imgpath = globalStaticResourcePath+'image.jpg';

This will do the job.

Br1.
This was selected as the best answer
JimPDXJimPDX

Hi Ravindra. I had to play around with this a lot before I got it right, and I still can't figure out why lightbox2 tries to find find it's images in the /apex directory. Anyway your code should look like this:

 

 

{!URLFOR($Resource.XXXXXXXZip, 'js/yyyyy.js')}
{!URLFOR($Resource.XXXXXXXZip, 'img/zzzz.gif')} 
 
 
 Assuming the Name of your Static Resource (not the file you upload but the Name in Salesforce) is "XXXXXXXZip" and your file is in a folder called /js.


ravindraravindra
Hi, thanx for the idea its working with small changes made...
 
like the one instead of using 
 
<apex:includeScript> i used
 
<script type="text/javascript" src="{!URLFOR($Resource.xxxxxxxZip, '/js/yyyyy.js')}"/>
 
and
 
the path var imgpath = globalStaticResourcePath+'/img/image.jpg';in the js file.
 
Thanks,
 
ravindra 
 


ryan_marplesryan_marples
See this post I just made which I think will help:

http://community.salesforce.com/sforce/board/message?board.id=pilotprogram&message.id=15&jump=true#M15


Sunil pal 29Sunil pal 29
Hi @ravindra and @br1,

I am also facing the same issue. Can you please share the javascript and image file structure with what are the changes made. Really glad if any ne can help me.