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
John Upton 8John Upton 8 

Display an image stored in Document in a Visualforce page

I'm trying to display an image that is stored as a Document. Starting with the most basic example, I am using the following:
  
<apex:page standardcontroller="Document">

  <apex:outputField value="{!Document.name}"/>
  <apex:image id="theImage" value="!Document.Logo.jpg" width="100" height="100"/>

</apex:page>

passing the ID of the document in through the URL. It's Name displays OK, but the image does not, just showing as a 'dummy' 100x100 blank square. What syntax do I need to use? Or do I need a different approach some how?
Note, I do not want to use a Static Resource.
Thanks
Best Answer chosen by John Upton 8
Suraj GharatSuraj Gharat
You may try this 
<apex:image id="theImage" value="{!'/servlet/servlet.FileDownload?file=' & Document.Id}" width="100" height="100"/>

 

All Answers

Suraj GharatSuraj Gharat
You may try this 
<apex:image id="theImage" value="{!'/servlet/servlet.FileDownload?file=' & Document.Id}" width="100" height="100"/>

 
This was selected as the best answer
John Upton 8John Upton 8
Thanks Suraj,

However, in my test, your code displays the same 'dummy' blank square. I've also tried adding a '!' before 'Document.Id', but I get the following compilation error:
Error: Incorrect parameter type for function 'not()'. Expected Boolean, received Text
Note, I can at least get the image to display by substituting the actual ID as follows: 
<apex:image id="theImage" value="{!'/servlet/servlet.FileDownload?file=' & '0158E0000000nh0'}" width="100" height="100"/>

but this is not what I want as the image displayed needs to be derived dynamically.
Any idea what I am doing wrong?
Suraj GharatSuraj Gharat
The syntax "Document.Id" should give needed ID of the document dynamically. However as you said somehow it was not working, I see we need to diagnose this since it is working in my org.

Try adding following markup in your page 
<br/>Image relative URL = {!'/servlet/servlet.FileDownload?file=' & Document.Id} <br/>
Then copy the printed address from the page by above markup, and form complete URL by prepending your Salesforce instance url (It should look something like this "https://ap1.force.com/servlet/servlet.FileDownload?file=0159000000CMdyq ); And then check in the other tab that it loads expected image or not.

This is one way of debugging your issue, perhaps you may have better ways.
John Upton 8John Upton 8
Hi Suraj,

You original solution how works! Can only assume that I must have refreshed the page and so lost the ID from the URL. Apologies for that and thanks for your help.
ryan woods 8ryan woods 8
This worked for me: <apex:page standardcontroller="Document" showHeader="false">

  <apex:outputField value="{!Document.name}"/>
    
        <apex:image id="theImage" value="{!'/servlet/servlet.FileDownload?file=' & Document.Id}" width="100" height="100"/>
</apex:page>
Jacob.MarshallJacob.Marshall
<apex:page standardcontroller="Medical_Information_Request__c">
    <apex:image id="theImage" value="/servlet/servlet.FileDownload?file={!Medical_Information_Request__c.SignatureId__c}" width="100" height="100"/>
</apex:page>

I've been trying to get the above visualforce page to load on a layout for a custom object.  I've been getting the following error though:

User-added image
Ashwin KhedekarAshwin Khedekar
/*
  This is controller for the VF page vfDocumentImageCheck. It will query for document
  whose name is LookupSymbol so that this image can be shown on the VF page. Browse
  for VF page as :- https://c.ap5.visual.force.com/apex/vfDocumentImageCheck
  Upload document first in the Documents folder whose name is LookupSymbol from
  All Tabs - Documents - New Document
*/
public class DocumentImageCheck
{
    public String imageURL{get;set;}
    
    public DocumentImageCheck()
    {
        imageURL = '/servlet/servlet.FileDownload?file=';
        List<document> documentList = [select name from document where 
                                                  Name = 'LookupSymbol'];
    
        if(documentList != null && documentList.size() > 0)
        {
            imageURL = imageURL + documentList[0].id;
            System.debug(LoggingLevel.INFO, '//// imageURL modified now ' + imageURL);
        }
    }
}

The VF page :- vfDocumentImageCheck :-
<apex:page controller="DocumentImageCheck">
  <apex:image id="image1" url="{!imageURL}" alt="Lookup" title="Lookup Symbol"/>
</apex:page>