Render Image from Rich Text Field

Question

I have a rich text field where users can attach images. I am displaying these images in a visualforce page. When I am rendering the images, I am not getting the images. Instead, the image is getting rendered as html text.

Here's my apex code:

public List<SObject> getResults () {
    Id id = ApexPages.currentPage().getParameters().get('id');
    List<SObject> results = [SELECT Id, 
                                    Name, 
                                    URL__c,
                                    Filename__c,
                                    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">
          {! v.Screenshot__c}
      </div>
</apex:repeat>

v.Screenshot__c is 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><img src="https://mydomain.documentforce.com/servlet/rtaImage?eid=imageid&amp;feoid=someid&amp;refid=someid" alt="anotherimage.png"></img></p>

Instead of this, how can I render an actual image.

Appreciate your help on this!

Answer 1

You should use the <apex:outputField> tag instead of a naked merge field.

Incorrect:

<div>{!myRecord.MyField__c}</div>

Correct:

<apex:outputField value="{!myRecord.MyField__c}" />