0

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

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}
  • 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 at 23:41
  • 1
    @Illusion Updated my answer. – Reshma Jan 23 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.