+ Start a Discussion
John Upton 8John Upton 8 

Basic dynamic image display

Hi. I'm trying to get a image to display on a Visualforce page. I have added a Static Resource, and can get it to display if I cite its name directly, but if I try to reference it using a variable, I either get an error in compilation, or a small 'dummy' image like it can't find the one I've specified.

The code that works find is as follows:

<apex:page standardController="Account">
  <apex:variable var="imageVar" value="MMC_Logo"/>
  <p>Resource name {!imageVar}</p>
<apex:image url="{!$Resource.MMC_Logo}"/>
</apex:page>

However, if I add a penultimate line of 

<apex:image url="{!$Resource.(imageVar)"/>

I get the small 'dummy' image displayed.
Surely this is just a minor syntaxical error, but nothing I have tried will work! Can someone point me in the right direction? 
Thanks..
Best Answer chosen by John Upton 8
Ashish DevAshish Dev
Hi John,
The example at the last of the page in the doc reference you have give is for zip resources.
You can zip your picture and upload on static resource then  you can refer that image through variable same way mentioned in the doc.
<apex:variable var="imageVar" value="{!imageName}"/> 
​<apex:image url="{!URLFOR($Resource.myZipFile, imageVar)}"/>

 

All Answers

Adrian  GawryszewskiAdrian Gawryszewski
Try to remove parenthees from around imageVar <apex:image url="{!$Resource.(imageVar)"/> and set width and length of it.
John Upton 8John Upton 8
Hi Adrian. Thanks for your response. I have done as you suggest, but all that happens is that my 'dummy' image (to the right of the main 'Money Mentor' image) has the width and length that I gave it. See screenshot. Any other ideas? Thanks
Visualforce display of images.jpg
Adrian  GawryszewskiAdrian Gawryszewski
Ok so I tested in on my own SF instance and it didn't even allow me to save the file with the construction you have above. I tried many different ways and it looks like you can't use variable in that particular place and the name has to be hardcoded in a sense.
John Upton 8John Upton 8
Hi Adrian. Thanks for the effort you have put in. However, according to the example at the bottom of in this link (https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_reference.htm), you should be able to do it. I have now gone as far as entirely replicating the 'MyZipFile.zip' file and 'Picuture.gif' from the example, then creating the custom controller and visual force, but I still just get the 'dummy' picture. Unless you or anyone else has any ideas, I guess I'll raise a Salesforce Support case..
Ashish DevAshish Dev
Hi John,
The example at the last of the page in the doc reference you have give is for zip resources.
You can zip your picture and upload on static resource then  you can refer that image through variable same way mentioned in the doc.
<apex:variable var="imageVar" value="{!imageName}"/> 
​<apex:image url="{!URLFOR($Resource.myZipFile, imageVar)}"/>

 
This was selected as the best answer
Adrian  GawryszewskiAdrian Gawryszewski
Of course I should mention that in my prevoius post thanks Ashish! 
John Upton 8John Upton 8
Hi Guys. I have finally managed it! Was about to write back that, despite following the instructions in the link I reference above, it still did not work, but I decided to try one more thing. Instead of zipping a folder called MyZipFile (and hence end up with MyZipFile.zip\MyZipFile\Picture.gif) I zipped just the image (ending up with MyZipFile.zip\Picture.gif) and, hey-presso, it works! Seems therefore that if you want to store you images in a zip, you must do so flat, with no directory structure preserved inside it. I would still like to know what I am doing wrong in trying to reference the image without storing it in a zip, but this is a viable workaround for now at least. 
Now I have managed my most simple scenerio, I will have to create myself a more complicated controller so as to get different images to display based on the user, but we can consider this post closed I think. Thanks again. :)
John Upton 8John Upton 8
Also worth noting that the image file names must
* contain no spaces
* be referenced with exactly the same case (i.e. case-sensitive)
AYANAYAN
Dynamic Image In salseforce without Zip file:
This example is without using zip file, access image from static resource.
Public Class LoadIcon
{
                Public  string imageName {get;set;} 
                Public Loadicon()
               {
                      companyLogo = 'ViewIcon';//image api name in static resource
               }              
}
 
vf page display icon
        <apex:variable var="imageVar" value="{!companyLogo}"/>
        <apex:image url="{!$Resource[imageVar]}"/>