+ Start a Discussion
ManjunathManjunath 

Trailhead- "Using Static Resources" challenge

Hi ,
I was trying to solve the trailhead challenge under "Using Static Resources".

Am getting following message:
Challenge not yet complete... here's what's wrong: 
The page does not include a reference to the specified image

Following code am using.
<apex:page >
            <apex:pageBlock title="Pic" >
                    <apex:pageBlockSection >
                         <apex:image value="{!URLfor($Resource.vfimagetest, '/cats/kitten1.jpg')}"/>
                    </apex:pageBlockSection>
             </apex:pageBlock>
</apex:page>
Am I missing something here?

Regards,
Manjunath C Sarashetti
ManjunathManjunath
Found the problem:

changed the inital code to from <apex:image value="{!URLfor($Resource.vfimagetest, '/cats/kitten1.jpg')}"/> this to this
<apex:image value="{!URLfor($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>.

Problem was with '/'

Regards,
Manjunath 
Santanu HalderSantanu Halder
Good one. I was also stuck there.
Willi WerkelWilli Werkel
Hard to spot - especially as the version with "/" works as well.
Sarabjeet_RattanSarabjeet_Rattan
Yes, I encountered the same error. The reference apparently does not need the first "/" in the image url.
Rashi krishan 1Rashi krishan 1
Hi Manjunath,
You  have done  a little mistake in specifying the URL,it should be the following

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

Paste the above one ,this will solve the problem.


Thanks,

Rashi Krishan
Mirketa Software Pvt Ltd
http://mirketa.com/index.html


 
Michael Davis 15Michael Davis 15
Seems a problem with Trailhead.  If the preview pane works and shows the image...with or without the '/' then that should satisfy the challenge.
Titane PhamTitane Pham
<apex:page >
    
    <apex:includeScript value="{!$Resource.vfimagetest}"/>

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

</apex:page>
Jess BurghJess Burgh
Hey all! I downloaded the file to a 'Downloads' folder on my desktop. Wrote out the code as follows:
<apex:page >
    <apex:image url="(!URLFOR($Resource.vfimagetest,'cats/kitten1.jpg')}"/>
</apex:page>
But keep getting an error message..Challenge Not yet complete... here's what's wrong:
The Static Resource 'vfimagetest' was not found. Am I missing something?? Thanks!!
Dan McGaughey 8Dan McGaughey 8
@Jess, 

You need to upload the zip file as a static resource. Follow the instructions under "Create and Upload a Zipped Static Resource" in the module.
Jess BurghJess Burgh
@Dan,
   Thanks Dan! I figured it out!
CharlesjYooCharlesjYoo
Hi, I'm a very much a beginner at this, but can someone explain to me the difference between the change from <apex:image url=   to <apex:image value=?? 

Why doesn't it work with URL? 
 
Jonathan A FoxJonathan A Fox
I would warn for two mistakes i did, should anyone else find a problem here:

 <apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"   DID NOT WORK FOR ME...     i replaced 'url' for 'value' =>  <apex:image value="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}" and it DID WORK! - Easy confusion. 

Also, in the challenge, there is a link within the writing to the zip file you need. I read fast, missed that bit and made my own, and it did not like that.
steve nabors 7steve nabors 7

The exercises on that module are wrong too.  After coming here, I was able to fix the sample exercise as well.  You have to remove the "jquery.mobile-1.4.5/" out of the URL lines on the VFP: jQueryMobileResources 

Working Code below:
 

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    
    <!-- Add static resources to page's <head> -->
    <apex:stylesheet value="{!URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}"/>
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.js')}"/>
    <div style="margin-left: auto; margin-right: auto; width: 50%">
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message:
            <apex:image alt="eye" title="eye"
                 url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png')}"/>
            <apex:image alt="heart" title="heart"
                 url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/heart-black.png')}"/>
            <apex:image alt="cloud" title="cloud"
                 url="{!URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png')}"/>
        </p>
    <!-- Display images referenced by CSS styles,
         all from a static resource. -->
    <h3>Background Images on Buttons</h3>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-action">action</button>
    <button class="ui-btn ui-shadow ui-corner-all
         ui-btn-icon-left ui-icon-star">star</button>
    </div>
</apex:page>
Saket Ranjan 3Saket Ranjan 3
@manjunath thanks.
Érick BSÉrick BS
Hi!

Try to do these steps after to run your VF code:

// Creating and Uploading a Simple Static Resource: When your static asset is not related to other assets—that is, not part of a set of similar assets such as a group of icons—it’s easiest to create a stand-alone static resource. 1. From Setup, enter Static Resources in the Quick Find box, then select Static Resources, and then click New. 2. Provide a name for the static resource 3. Click Choose File, and then choose the file you want to upload. 4. If you see the Cache Control menu, choose Public. This item isn’t visible in all organizations. 5. Click Save.
Joita MondalJoita Mondal
First you have to downloas the vfimagetest.zip file from the "This" highlighted word in the question/task then u have to upload that resource By going to Setup > Enter Static Resources in the Quick Find Box > Select Static Resources > Cleck NEW > NAme the statuc resource with "vfimagetest:\" >Choose the zip file u just downloaded few minutes back > then Save .
Now run the code :
<apex:page >
    <apex:includeScript value="{! $Resource.vfimagetest }"/>
    <apex:image url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/>
       
</apex:page>

P.S : Dont change url with value,else it will show the error of getting no image tag.