How to display my uploaded image (Document) to Page Layout and Visualforce Page

Question

Have problem with this. I am able to upload image file to document. But how can I display this to page layout and to a visualforce page.

Page Layout:

I want to put the image below the Logo label.. and also how to display it in vf page.

This is the image in document.

this is the link: this is the file id : 0X9000000A6bH2... Hope you all understand me.. thanks

Answer 1

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". You can add this VF page to layout of the page.

VF Page

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

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

</apex:page>

Apex 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;
    }
  }
}

Update

VF Page

Here is a working solution with custom Event object with a Logo field. I assume the URL is https://<your salesforce URL>/apex/logodisplay?id=a0Li000000L03KU. Where the a0Li000000L03KU is a event id.

<apex:page standardController="Event__c" extensions="ImageController" showheader="false" sidebar="false">

    <apex:form >
      <apex:inputHidden id="eventLogo" value="{!Event__c.Logo__c}" />
      <apex:image url="{!imageURL}"></apex:image>
    </apex:form>

</apex:page>

Apex Controller

public with sharing class ImageController {

public String imageURL{get;set;}
private Event__c eventObject;

public ImageController(ApexPages.StandardController controller) {

    eventObject = (Event__c)controller.getRecord();
    imageURL='/servlet/servlet.FileDownload?file=';
    String logo_name = eventObject.Logo__c;
    List< document > documentList=[select name from document where Name=:logo_name];

    if(documentList.size()>0)
    {
      imageURL=imageURL+documentList[0].id;
    }
}

}

Answer 2

public ImageController(ApexPages.StandardController controller) {

    eventObject = (Event__c)controller.getRecord();
    imageURL='/servlet/servlet.FileDownload?file=';
    String logo_name = eventObject.Logo__c;
    List< document > documentList=[select name from document where Name=:logo_name];

    if(documentList.size()>0)
    {
      imageURL=imageURL+documentList[0].id;
    }
    else{
      imageURL = '';
    }
}

Add else condition to update imageURL so that in case if there are no document on that record (in my case I used attachment images) than a broken image/link will not be displayed.