My question is about rendering image using its base64 instead of src attribute. I have a rich text field where users can attach images. I am displaying these images in a visualforce page. How can I render the images with base64 instead of regular src attribute?

Here's my apex code:

public List<SObject> getResults () {
    Id id = ApexPages.currentPage().getParameters().get('id');
    List<SObject> results = [SELECT Id, 
                                    FROM myCustomObject__c 
                                    WHERE parent__c = :id];
    return results;

And here's my visualforce:

<apex:repeat var="v" value="{! results }">
      <div class="styleclass">
          {! v.Name}
      <div class="styleclass">
          <apex:outputField value="{! v.Screenshot__c}"/>

The above visualforce snippet renders the images, giving me something like this:

<p><img src="https://mydomain.documentforce.com/servlet/rtaImage?eid=imageid&amp;feoid=someid&amp;refid=someid" alt="myimage.png"></img></p>

Instead of this, how can I get base64 of an image? Something like this:

<img alt="my image" src="data:image/png;base64,{base64dataofImage}/>

Appreciate your help on this!


Its better to save base64 encoded value of Screenshot__c field in new field created in myCustomObject__c object so that you can easily get encoded value and pass to visualforce page.

For encoding Screenshot__c use below code and do a mass update all records:


After that update your query as

List<SObject> results = [SELECT Id, 
                                Encoded_Screenshot__c //update field api name accordingly
                         FROM myCustomObject__c 
                         WHERE parent__c = :id];

Update visualforce code as

<img alt="my image" src="data:image/png;base64,{!v.Encoded_Screenshot__c}/>

Or another approach you can implement is store your screenshot__c as attachment for myCustomObject__c record and implement as discussed here.

Display Base64 data on a Visualforce page

Render blob image in visualforce page


You cannot query attachment body field in join queries. You need another soql to get that.

List<SObject> results = [SELECT Id, 
                                    (SELECT Id, Name FROM Attachments)
                             FROM myCustomObject__c 
                             WHERE parent__c = :id];

Get Attachments in separate query in a Map.

Map<ID, Attachment> attMap = [Select Id, Body, Parent.Type FROM Attachment WHERE Parent.Type = 'myCustomObject__c'];

In vf page:

  • thanks for answering! The problem with the second approach I am having is I am not sure how to get the attachment into a SOQL query and reference the attachment in a merge field. Could you please help with that part?
    – Illusion
    Jan 22 '19 at 23:41
  • 1
    @Illusion Updated my answer.
    – Reshma
    Jan 23 '19 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.