1

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, 
                                    Name,
                                    Screenshot__c
                                    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>
      <h3>Screenshot</h3>
      <div class="styleclass">
          <apex:outputField value="{! v.Screenshot__c}"/>
      </div>
</apex:repeat>

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!

1 Answer 1

3

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:

EncodingUtil.Base64Encode(myCustomObject__c.Screenshot__c);

After that update your query as

List<SObject> results = [SELECT Id, 
                                Name,
                                Screenshot__c,
                                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


Edit:

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

List<SObject> results = [SELECT Id, 
                                    Name,
                                    Screenshot__c,
                                    (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:

{!attMap[v.Attachments[0].Id].Body}
3
  • 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
    Commented Jan 22, 2019 at 23:41
  • 1
    @Illusion Updated my answer.
    – Reshma
    Commented Jan 23, 2019 at 6:37
  • @Illusion how did you manage to get the base64 format of the image from richtext field ?
    – brahma
    Commented Sep 30, 2023 at 16:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .