function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
AgendumAgendum 

Referencing an image static resource

Hi,

 

I've uploaded some images to:

 

\staticresources\images\codename\foo.jpg

\staticresources\images\codename\bar.jpg

 

So I found $Resources, but the docs don't really answer how to reference images in subfolders.  How can I use URLFOR and $Resources to get the path to these images?

 

Once I get an answer to that question, I have a followup... do I have to use <apex:image> instead of using <img> with the URLFOR to render an image?  If not, what is the advantage of using <apex:image> over <img>?

 

Thanks!

Best Answer chosen by Admin (Salesforce Developers) 
Shashikant SharmaShashikant Sharma

No please don't save it in folder

 

Go to Develop -> Static Resource -> Add your resource here then only you will get your image

All Answers

Shashikant SharmaShashikant Sharma

Use this syntax,

 

In this Bluhills.jpg image file is in folder images which is part of a zip file attached in static resource, you an provide your path to image in static resource.

 

<apex:image url="{!URLFOR($Resource.TestZip, 'images/Bluehills.jpg')}" width="50"
height="50" />

 Using apex control provides you more attributes supported in VFP. Always prefer apex controls.

 

AgendumAgendum

 

I tried

 

{!URLFOR($Resource.TestZip, 'images/codename/foo.jpg')}

 

But I get: Static Resource named TestZip does not exist.

 

So I tried:


{!URLFOR($Resource.images, 'codename/foo.jpg')}

 

And similarly get: Static Resource named images does not exist.

 

I am not putting it in a ZIP file... its in a subfolder under staticresources:

 

staticresources

\

  images

  \

    codename

    \

      foo.jpg

      bar.jpg

 

Shashikant SharmaShashikant Sharma

Please do not use TestZip it is an example only, Use the API Name of your static resource where you have your image folder, 

 

So use it like this

 

{!URLFOR($Resource.ResourceAPIName, 'path to image file starting from your folder')}

 

 

AgendumAgendum

Ok, I am doing this wrong somehow.  What I did was (from Force IDE):

 

1) Right-click staticresources and choose New->Folder.

2) I created a folder named 'images'.

3) And then I created a folder under that named 'codename'.

4) And then from Windows Explorer I dragged foo.jpg and bar.jpg onto the 'codename' folder.

 

Do i need to do anything other than that to access my assets?  It sounds like I need to create a "resource API".  The Help in the IDE doesn't really clarify this at all... it says:

 

"To reference a stand-alone file, use $Resource.<resource_name> as a merge field, where <resource_name> is the name you specified when you uploaded the resource."

 

And gives examples:

 

<apex:image url="{!$Resource.TestImage}" width="50" height="50" />

or

<apex:includeScript
 value="{!$Resource.MyJavascriptFile}"/>
Shashikant SharmaShashikant Sharma

No please don't save it in folder

 

Go to Develop -> Static Resource -> Add your resource here then only you will get your image

This was selected as the best answer
AgendumAgendum

Thanks very much.  Things I learned from this experience:

 

1) Force IDE is useless for uploading new static resources

2) Static resources cannot be stored hieararchial... it is a flat list

3) If you want hierarchy, put your resources in a ZIP

Shashikant SharmaShashikant Sharma

Your welcome :)