+ Start a Discussion
Brendan Walton 2Brendan Walton 2 

Developer Trail Beginner - Visualforce Basics - Using Static Resources - Challenge

Challenge Description:
  • 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.

Screenshot of Visualforce Page:
User-added image
Screenshot of Resource Page:
User-added image

Screenshot of page preview:
User-added image

Exact text of error:
Challenge not yet complete... here's what's wrong: 
The page does not include a reference to the specified image

Can't figure out whats wrong, everything looks like its working perfectly and I used the examples in the module as a base for the code.

Best Answer chosen by Brendan Walton 2
William TranWilliam Tran
Hmmm, try these 2 things:

try removing show header = false since I don't see that as part of the exercise.
also try removing the first slash in the path.

Here's the revised code.

Thx
 
<apex:page>

<apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}" />

</apex:page>

Also it looks like you are new to this forum, Welcome!!!

As a common practice, if your question is answered, please choose 1 best answer. 
But you can give every answer a thumb up if that answer is helpful to you. 

This will help keep the forum clean and help future users determine what answers are useful
and what answer was the best in resolving the user's issue. 

Thanks

All Answers

William TranWilliam Tran
Hmmm, try these 2 things:

try removing show header = false since I don't see that as part of the exercise.
also try removing the first slash in the path.

Here's the revised code.

Thx
 
<apex:page>

<apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}" />

</apex:page>

Also it looks like you are new to this forum, Welcome!!!

As a common practice, if your question is answered, please choose 1 best answer. 
But you can give every answer a thumb up if that answer is helpful to you. 

This will help keep the forum clean and help future users determine what answers are useful
and what answer was the best in resolving the user's issue. 

Thanks
This was selected as the best answer
Brendan Walton 2Brendan Walton 2
Really? 

It was the "/" (I had previously tried with/without the showheader line). That's idiotic. The page had the correct images displayed; that should have been enough.
girikumar reddygirikumar reddy
Challenge Not yet complete... here's what's wrong: 
The page does not include a reference to the specified image 

am also getting same problem
 
Naveen V 1Naveen V 1
U can try below code...
<apex:page>
 <apex:image url="{!$Resource.vfimagetest}" width="50" height="50"/>
</apex:page>
Sherry DunnSherry Dunn

Hi,
This code is pretty straight forwad, but I got error from developer console, "Static Resource named vfimagetest doesn't exist, Check spelling. it was downloaded by default to Download folder when clicking on "This file" in the Challenge. Did I miss anything?

Thanks.

<apex:page >
    <apex:image value="{!URLFOR($Resource.vfimagetest, '/cats/kitten1.jpg')}" />
</apex:page>
Latika ChouguleLatika Chougule
Hi Sherry, I tried following and working for me. Just change value to URL
<apex:page >
    <apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}" />
</apex:page>
 
Jess BurghJess Burgh
Hey all. I'm not able to complete this challenge. I keep getting this error message Challenge Not yet complete... here's what's wrong:
The Static Resource 'vfimagetest' was not found.
Below is the code I wrote out
<apex:page >
    <apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}" />
</apex:page>
 Am I doing anything wrong? Did I miss something?
Madhurima Dutta 5Madhurima Dutta 5
First upload the Zip file vfimagetest to the Static resources in Salesforce Classic view of your developer edition, then the code would work fine.
Jess BurghJess Burgh
Hello! I figured out the problem. I forgot to upload the Zip file to my static resources. I checked the challenge and passed! Thanks for you helo!!
Lazette ParksLazette Parks
You have to Create a Static Resource (https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_create.htm). This will allow you to upload the Kitten1 jpeg. and copy use the following language from the few that were listed. Then you will preview, somehow the photo is there, but it's not allowing you to see the full image. Good thing, it's not a blank screen. :-) Save what you have and submit the challenge again. 
Kapavari VenkatramanaKapavari Venkatramana
Good Nice Explanation.
Diogo Pacheco PedroDiogo Pacheco Pedro
@William Tran 

Perfect it solved the isue. However, Silly from Challenge creator but we move on :). 

Thanks a lot !!!
aam1raam1r
For further clarity to what has already been answered and explained: the Trailhead gives an example that does not work either.  This is why many would have ended up using 'vfimagetest/cats/kitten1.jpg' instead of 'cats/kitten1.jpg'
Jeevana TammareddyJeevana Tammareddy
Hi Everyone,

I tried everything which you guys suggested but still could not complete the challenge
This is my code
<apex:page >
    <apex:image url="{!$Resource.vfimagetest}" width="70" height="70"/>
  </apex:page>

Error is
"The page does not include a reference to the specified image. HINT: The static resource does not require a '/' in the image URL. If you are using this, try removing and check again."
Can anyone help me with this.
 
Jeevana TammareddyJeevana Tammareddy
I figured out the problem. 
<apex:page >
     <apex:image alt="cats" title="kitten"
                 url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>
</apex:page>

Thanks.
Kamil KowalczykKamil Kowalczyk
Well thre is a lot of way how to get the kitten1.jpg displayed, but SF has it's own 'way' of accepting the things, most of the cases it is the simplest way, so afterall it is not as bat though, but yes, I am getting frustrated sometimes ; )
Shubham kumar 135Shubham kumar 135
Hi Jeevana,
Thank you for your above solution.
I have a doubt how it resolved the issue of "The static resource does not require a '/' in the image URL. If you are using this," in the code.
It will be a great help if you give me a proper explanation.

Thanks and Regards
Shubham
Sanket ShikhariyaSanket Shikhariya
Hi experts.
 I am unable to see the image,only the small image icon is visible on the page.plz  help me resolve this issue.I have use the below code
<apex:page> <apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}" /> </apex:page>
User-added image
shradha mhaskeshradha mhaske
User-added image
Hi all experts,
I have one query.
I am getting the image icon instead of kitten image.
By the way, the challenge is completed but the kitten image is not displayed?

 
swapna maramswapna maram
Upload  cats/kitten1.jpg as static resource and worked with below code ,completed the challenge .

<apex:page >
     <apex:image alt="cats" title="kitten"
                 url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>
</apex:page>
Varalakshmi Niharika JaguVaralakshmi Niharika Jagu
Upload the given zip file as a static resource into your salesforce and then write the given code block below, to get 100% in your challenge.
 
<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    <apex:image alt="Kitten1" title="Kitten1" url="{! URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>
</apex:page>

 
Yamini MachhaYamini Machha
<apex:page> <apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}" /> </apex:page>
Kalyani GanduriKalyani Ganduri
First we need to upload the Zipfile in copressed format, then the static resaource name is asit is mentioned in the trailhead. then the below will work

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

</apex:page>