Displaying Images in a Visual Force Page that are stored in Document/Attachment Object

Many Times you might have ended up into a situation where you want to display an image that is stored either in Document or Attachment object. It is very easy to display an image contained in the static resource but what if you want to use Document or Attachment object instead? This article will help you to show an image into the visual force page.

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= 01590000000Itdo" where  01590000000Itdo is the the unique id of the Document/Attachment record containing the image.

Example :
I have created 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". The code in the controller class and Visual Force is self explanatory but still I would explain some important things.

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. 

Thats it. We are done with the controller class. Now the next step is to design the Visual Force page to display an image.

Visual Force Page :

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

So finally now our Visual Force page is complete and ready to show an image.

I hope this article would be useful for you to solve your problem to display an image from Document / Attachment Objects.