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
MedhanieHabteMedhanieHabte 

Unable to get image to display in Insecure Remote Site Trailhead

Hi all, I am working on the Insecure Remote Site Trailhead and can't seem to get the image to display from a static resource zip file.

I am using this as my code
 
<apex:image url="{!URLFOR($Resource.Challenge_Resources,'Challenge_resources/Castle.png')}" />

Are there any steps I should take, hope it helps.
Prateek Singh SengarPrateek Singh Sengar
Hi,
As per the above code snippet. It looks like you have a static resource added into your dev org called "Challenge_Resources". This zip contains folder called "Challenge_resources" which contains the image. castle.png.

Please ensure that the zip indeed contains the folder as specified. If the image is directly under the zip file the syntax would be
<apex:image url="{!URLFOR($Resource.Challenge_Resources,'Castle.png')}" />

 
MedhanieHabteMedhanieHabte
This works, however, I still cannot view the image, I get a blank page or an image not found, despite the right syntax. Might be where the image is allocated.
 
<apex:page sidebar="false" tabStyle="Insecure_Remote_Resource_Challenge__tab">
<apex:sectionHeader title="Insecure Remote Resource Challenge" />
<apex:form >
    <apex:pageBlock >
        <apex:pageMessages />      
        <apex:pageBlockSection title="Demo" columns="1" id="tableBlock">

        <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"/>
        <h1 id="heading1">Hello, this is my castle</h1> 
        <apex:image url="{!URLFOR($Resource.Challenge_Resources,'/Castle.png')}" />
        <script>
        $(document).ready(function(){
            $("#btn2").click(function(){
                $("#heading1").html("<b>See all my castles <a href=\"/a02/o\">here!!</a></b>");
            });            
            });
        </script>
        <button id="btn2" type="button">Set HTML</button>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="Code links" columns="1">
            <apex:outputPanel >
                <ul>
                    <li><c:codeLink type="Visualforce" namespace="" name="Insecure_Remote_Resource_Challenge" description="Visualforce Page"/></li>            
                </ul>
            </apex:outputPanel>        
        </apex:pageBlockSection>        
    </apex:pageBlock>          
</apex:form>              
</apex:page>

 
rizwan ahmed 16rizwan ahmed 16
1. click setup
2.In quick find box on left top enter static resources.
3.click on static resources and click new
4.name should be "Challenge_Resources"
5.upload image it can be of any name 
 then make following changes in your code as told below 
use              <apex:image url="{!URLFOR($Resource.Challenge_Resources)}" /> 
remove         <apex:image url="{!URLFOR($Resource.Challenge_Resources,'/Castle.png')}" />.

It will work fine
regards:
shaik rizwan ahmed

Mark is as best answer 
Vishnu Ram KumarVishnu Ram Kumar
Below worked for me perfectly. There are two places where you need to change the URL references. One at line#8 for <apex:includeScript> and the second at line#10 for <apex:image>
 
<apex:page sidebar="false" tabStyle="Insecure_Remote_Resource_Challenge__tab">
<apex:sectionHeader title="Insecure Remote Resource Challenge" />
<apex:form >
    <apex:pageBlock >
        <apex:pageMessages />      
        <apex:pageBlockSection title="Demo" columns="1" id="tableBlock">

        <apex:includeScript value="{!URLFOR($Resource.Challenge_Resources, 'Challenge_Resources/jquery-3.1.0.min.js')}"/>
        <h1 id="heading1">Hello, this is my castle</h1> 
        <apex:image url="{!URLFOR($Resource.Challenge_Resources, 'Challenge_Resources/Castle.png')}"/>
        <script>
        $(document).ready(function(){
            $("#btn2").click(function(){
                $("#heading1").html("<b>See all my castles <a href=\"/a02/o\">here!!</a></b>");
            });            
            });
        </script>
        <button id="btn2" type="button">Set HTML</button>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="Code links" columns="1">
            <apex:outputPanel >
                <ul>
                    <li><c:codeLink type="Visualforce" namespace="" name="Insecure_Remote_Resource_Challenge" description="Visualforce Page"/></li>            
                </ul>
            </apex:outputPanel>        
        </apex:pageBlockSection>        
    </apex:pageBlock>          
</apex:form>              
</apex:page>

Thanks,
Vishnu
Sarah J DSarah J D
Thanks Vishnu! It really helps!
ChemchemChemchem
Thanks Vishnu