+ Start a Discussion
Robert RobinsonRobert Robinson 

Trailhead challenge: Use a static resource to display an image on a Visualforce Page

The challenge (aka "Hello Kitty"):
Upload a specified zip file as a static resource. The zip will have directories with images and you have to display a specific image on a Visualforce page.The page must be named 'ShowImage'.
This file must be uploaded as a Static Resource named 'vfimagetest'.
The page must have a Visualforce apex:image tag that displays the 'kitten1.jpg' image from the 'cats' directory of the static resource.


I have uploaded vfimagetest and made it public. I unzipped the file (maybe my first mistake) and can see the kitten1.jpg file. My code is:
<apex:page>
  <apex:image url="{!URLFOR($Resource.vfimagetest,'images/kitten1.jpg')}" width="50" height="50"/>
  </apex:page> 
The code saves; however, I cannot see the file. I know that I am missing something simple. If someone can assist, I can start my self flogging in earnest. Thanks. 
Best Answer chosen by Robert Robinson
Adrian  GawryszewskiAdrian Gawryszewski
Ok so the next step is checking what is the resource folder structure you uploaded to salesforce. It maybe that you called it in some different way and it can't find the path.

All Answers

Adrian  GawryszewskiAdrian Gawryszewski
Well first of all in the description it says "... image from cats directory..." so I guess it could be 'cats/kitten1.jpg', but I might be wrong.
Robert RobinsonRobert Robinson
Good catch. I have played with this in so many versions that i had left the "cats" off in what i posted. Adding it back did not make me have kittens, though...
Adrian  GawryszewskiAdrian Gawryszewski
Ok so the next step is checking what is the resource folder structure you uploaded to salesforce. It maybe that you called it in some different way and it can't find the path.
This was selected as the best answer
Robert RobinsonRobert Robinson
Aaaaaaugh! I knew it was something dumb...
I pointed at the unzipped folder, not the zipped file...User-added image Hello kitty...
Robert RobinsonRobert Robinson
and thank you for your help Adrian. You hit the answer about the same time that I was doing the headslap, but you still deserve the green check...
Adrian  GawryszewskiAdrian Gawryszewski
Always happy to help :)
Stuart Edeal.Stuart Edeal.
Well, "Cats off" to all of you for figuring this out and getting the code to work.  I have posted this kudos on Catter.
Robert RobinsonRobert Robinson
To quote the old MTM productions:
"Meow"
Robert RobinsonRobert Robinson
And of course, #Trailhead training came to the rescure in real life, FAST. No more than 10 days after I completed the module, I worked on a project setting Accounts in tiers (1, 2 or 3 stars). Using static resources, we affixed stars to the sky, and now have a way to rate Accounts that looks great on Salesforce1 as well.
Christopher.RammChristopher.Ramm
Just to be sure. The correct code should be look like this: 
 
<apex:page>
  <apex:image url="{!URLFOR($Resource.vfimagetest,'cats/kitten1.jpg')}" width="50" height="50"/>
  </apex:page>

And - as already mentioned: Be sure that you upload the .zip file not the extracted files.
Reddeiah R 3Reddeiah R 3
<apex:page>
  <apex:image url="{!URLFOR($Resource.vfimagetest,'cats/kitten1.jpg')}" width="50" height="50"/>
  </apex:page>
 Bold path is requiredd 
venkat davuluri 31venkat davuluri 31
Hello All,

For some reason i am getting the following error
:Static Resource named vfimagetest does not exist. Check spelling. It looks perfectly fine to me.

Please help!

Thank you
Venkat
Mercedes Belandria GarciaMercedes Belandria Garcia
If you don't add the 
width="50" height="50"  attributes the challenge is wrong :S. That is really odd to me
Magnus SigersdalMagnus Sigersdal
I didnt have to add the width and height.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    <apex:image alt="kitten1" title="kitten" url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>
</apex:page>

Worked just fine for me.
Bo ChulindraBo Chulindra
I just tried
<apex:page>
    <apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>
</apex:page>

and I couldn't get a success. I used Magnus' code and it worked:
<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    <apex:image alt="kitten1" title="kitten" url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>
</apex:page>