Display images on visualforce page from the attachment/document

The image can be displayed in the VF page by using <apex : image> tag. Image source is specified by "URL" attribute.
But the url should be in the form : " /servlet/servlet.FileDownload?file=xxxxxxxxxxx" where  xxxxxxxxxxx is the the unique id of theDocument/Attachment record containing the image.


Example :

A sample Visual Force page along with the custom controller. For this example, I have stored an image in the Document object with name"sample pic".

Controller :
=================================
public with sharing class ImageController {
 public String imageURL{get;set;}
 
  public ImageController()
  {
    imageURL='/servlet/servlet.FileDownload?file=';
    List< document > documentList=[select name from document where
                                    Name='SamplePic'];
 
    if(documentList.size()>0)
    {
      imageURL=imageURL+documentList[0].id;
    }
  }
}
====================================

Here I have taken a String variable declared as public. I am initializing this variable in controller with "servlet/servlet.FileDownload?file=" value. This variable will be used in VF page as a URL parameter in <apex : image> tag.

The controller fetches the document record from the Document object based on the "name" field specified in the SOQL query.

The only thing remaining in the imageURL is the unique id of document record. So after fetching record from the object, append "id" to the imageURL variable.



Visual Force Page :
=====================

<apex:page controller="ImageController" showheader="false" sidebar="false">

    <apex:form>
      <apex:image url="{!imageURL}">
    </apex:image></apex:form>

</apex:page>
========================

Here we are binding the imageURL ( String variable of controller class ) to the url attribute of <apex : image> tag.