+ Start a Discussion

Displaying image from RIch Text Field in vf page



I have uploaded an image through vf page and stored in a rich text field(Picture__c) of a custom object (Image__c).

i m facing some difficulties in displaying the image from rich text field(Picture__c) in a page block table. 

I have used wrapper class to convert the rich text field (Data type: STRING) in to BLOB values, after converting the it to BLOB the values are displaying something like below...







Here is my code..


<apex:page standardController="Image__c" extensions="ImageUpload1">
   <apex:form >
         <apex:pageBlock > //to upload the image
                       <apex:pageBlockSection >
                                 <apex:inputField value="{!Image__c.Name}" label="File Name"/>
                                 <apex:inputField value="{!Image__c.Description__c}" />
                                 <apex:pageblockSectionItem >
                                             <apex:Outputlabel value="Browse" for="files" />
                                                        <apex:inputFile id="files" value="{!Image__c.Picture__c}" contentType="{!imageContentType}" fileName="{!imageName}"/>
                     <apex:pageblockButtons location="Bottom" >
                                   <apex:commandButton value="save" action="{!save}"/>

             <apex:pageBlock >  // to display the image 
                      <apex:pageblockTable value="{!wrapperList}" var="i">
                                  <apex:column value="{!i.img.Name}" headerValue="Name"/>
                                  <apex:column value="{!i.img.Description__c}" headerValue="Description"/>

                                    <apex:column headerValue="Picture" >

                                                  <img src="data&colon;MIME/png;base64,{!i.convertToImage}" />

                                         <apex:column >
                                                     <apex:outputText value="{!i.picture}" />



public with sharing class ImageUpload1 {

    public Blob picture {get; set;}
    public Image__c img {get; set;}
    public string imageContentType {get; set;}
    public string imageName {get; set;}
    public List<Image__c> imgRecords {get; set;}
    public List<blobWrapper> wrapperList {get; set;}

     public ImageUpload1(ApexPages.StandardController controller) {
                img = (Image__c)controller.getRecord();
                imgRecords = [select id, Name, Description__c, Picture__c from image__c];

                 wrapperList = new List<blobWrapper>();
                 for(Image__c imgs : imgRecords ){
                             wrapperList.add(new blobWrapper(imgs));

    public void save(){
            system.debug('@@Name ' + imageName +'**content Type ' + imageContentType );
            insert img;

public class blobWrapper{
    public Blob picture {get; set;}
    public string convertToImage { get; set;}
    public Blob DecodeToImage { get; set;}
    public Image__c img {get; set;}

   public blobWrapper(Image__c rec){
         img = rec;
         if(img.Picture__c != null){
                   system.debug('!!!In:' + img.Picture__c);
                   picture = Blob.valueof(img.Picture__c);
                   convertToImage = EncodingUtil.base64Encode(picture);
                   DecodeToImage = EncodingUtil.base64Decode(convertToImage);
                  system.debug('**In:' + picture + 'Rec: '+ convertToImage );



thanks in advance...


why dont you just fatch the rich text box as string & then in VF page use <apex:outputlable> or <apex:panel> with escap="false"

it will rerender you text as a html




now i have used <apex:outputlabel> with escape="false", its rendering the image perfectly only if its uploaded through UI..

few images are uploaded through VF page, for those the image are displayed as below..







Is there a way to convert this BLOB value into image..


any help is much appreciated..




try to fact it in convert the bolb to string if we achive correct html in string it will solve u r issue

the just bind the string to putput lable with escap=false


please lett me know the output in mean will i try at my end




Please let me know the solution if it is resolved