+ 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

 

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.