function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sherwin liSherwin li 

Failed to create a simple Visualforce page that displays an image

Create a Visualforce page without the standard Salesforce header and display an image using the Visualforce image component.
The page must be named 'DisplayImage'.
It must NOT display the standard Salesforce header.
It must use a Visualforce apex:image component to display this image - https://developer.salesforce.com/files/salesforce-developer-network-logo.png

<apex:page showHeader="false" title='DisplayImage'> 
    <apex:pageBlock >
        <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png"/>
    </apex:pageBlock> 
</apex:page>

Challenge Not yet complete... here's what's wrong: 
The 'DisplayImage' page was not found.
Best Answer chosen by Sherwin li
Dileep KumarDileep Kumar

Hi Sherwin,

<apex:page showHeader="false" title="DisplayImage" sidebar="false"> 
    <apex:form>
        <table>
            <tr>
                <td width="1000px" height="600px;" align="center">
                    <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" />
                </td>
           </tr>
        </table>
    </apex:form>
</apex:page>

User-added image

This is correct page.

Please mark this as a best answer.

Thanks,

Dileep

All Answers

Dileep KumarDileep Kumar

Hi Sherwin,

<apex:page showHeader="false" title="DisplayImage" sidebar="false"> 
    <apex:form>
        <table>
            <tr>
                <td width="1000px" height="600px;" align="center">
                    <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" />
                </td>
           </tr>
        </table>
    </apex:form>
</apex:page>

User-added image

This is correct page.

Please mark this as a best answer.

Thanks,

Dileep

This was selected as the best answer
Sherwin liSherwin li
Hi Dileep,

     Still no luck. The 'DisplayImage' page was not found.
Dileep KumarDileep Kumar

Hi Sherwin,

whatever name you will write inside Name box that will save as a page name.

e.g If you will write 'DisplayImage' in place of 'a_b' in below image then your page name will 'DisplayImage'

User-added image

 

Do you want to save page name as like title name ??

<apex:page showHeader="false" title="DisplayImage" sidebar="false"> 
    <apex:form>
        <table>
            <tr>
                <td width="1000px" height="600px;" align="center">
                    <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" />
                </td>
           </tr>
        </table>
    </apex:form>
</apex:page>

Title is a attribute of <apex:page/> tag you can not save page name as like title.Title tag is used for the purpose of tab name.

 

please let me know about further cofusion.

Thanks,

Dileep

 
Dileep KumarDileep Kumar

Hi Sherwin,

If you want to create this page using developer console. it will work.

In both way it will work.

1.> Go to setup -> Develop ->Visualforce Page

2>Open Developer console ->select File -> select New  -> click on Visualforce page 

Give the page name and save.now again go to File -> select Open ->click visualforce page

Two show the page in browser please click on 'PreView' Button.

Thanks,

Dileep
Samir Sayyad 18Samir Sayyad 18

<apex:page showHeader="false" >
    <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" />
</apex:page>

Above code snippet is enough..>.
aman batra 3aman batra 3
use below code :

<apex:page showHeader="False">
<apex:pageBlock>
<apex:pageblocksection>
  <apex:image url="E:\Users\monika.w\Desktop\salesforce-developer-network-logo.png"/>
  </apex:pageblocksection>
  </apex:pageBlock>
</apex:page>

 
wroxtarwroxtar
I am confused as to why the guide on visualforce uses VALUE=" " instead of URL=" "???

apex:image usage from Visualforce Developer Guide.

I wasted hours on this before finding this post.
Janaki Reddi 17Janaki Reddi 17
I have situation where i need to create a VF to display multiple photos just like a photo board displaying all staff photos. 
RAMAKRISHNAN GVRAMAKRISHNAN GV

Hello Sherwin
 the answer goes like this
<apex:page showHeader="false">
<apex:pageBlock title ="DisplayName">
<apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png"/>
</apex:pageBlock>
</apex:page>
tushar dashputetushar dashpute
Hello Shervin,
Below one will definately work for you :

<apex:page showHeader="false" title="DisplayImage" >
    <apex:image value="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" height="100" width="300" />
</apex:page>
Suryanarayan BeheraSuryanarayan Behera
Hello Shervin,
Below one will work :

<apex:page sidebar="false" showHeader="false" > 
    <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png"/> 
</apex:page>

Don't add any extra attributes . 
Thank You.
Celio XavierCelio Xavier
Olá pessoal, a minha solução do exercício ficou exatamente assim: 

  
<apex:page showHeader="false" title="DisplayImage" sidebar="false"> 
    <apex:form>
		<apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" />
    </apex:form>
</apex:page>

Abraços!

Célio Xavier ​​​​​​​
Shubhangi MeteShubhangi Mete
Sherwin li 

<apex:page showHeader="false" sidebar="false"> 
<apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png" width="300" />
</apex:page>

This is correct page.
Please mark this as a best answer.
Thanks,
Shubhangi
Ghazala Syeda 13Ghazala Syeda 13

Please try this:

 

Name of Visualfore Page: DisplayImage.vfp

<apex:page showHeader="false">
    <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png"/>
</apex:page>
Varalakshmi Niharika JaguVaralakshmi Niharika Jagu
Hi, use this code snippet and get 100% with your challenge!!
  
<apex:page showHeader="false">
    <apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png"/>
</apex:page>

 
Emma chris 4Emma chris 4
Hello, Sherwin.

If you wish to use the developer console to construct this page. It'll work out.

It will work in any case.

1.> Select Setup -> Develop -> Visualforce Page from the drop-down menu.

2>Open the Developer console, select File, then New, then Visualforce page.

Save the page after giving it a name.

Go back to File, pick Open, and then click Visualforce page.
You may can use any web to create this, but I recommend using this one—>cell picture (https://depositphotos.com/vector-images/cell.html)


Please click the 'PreView' button to see the page in your browser.

Thanks,