function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
gopikrishnagopikrishna 

Rich text area image not display in visual force page

Hi,

   

        i am using  <apex:images> component not displayed images why? what i missied please help me.      

 

       my vf page image:                

<DIV id="pl_animation" CLASS = "pl_slide" >
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image1__c}" />
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image2__c}"/>
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image3__c}"/>
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image4__c}"/>
</DIV>

 

and 

 

class:

 

String strImg1 = String.valueOf(plan_c.get('Image1__c')); 
if(strImg1 <> null) { strImg1 = strImg1.substring(33, 153); }
String strImg2 = String.valueOf(plan_c.get('Image2__c')); 
if(strImg2 <> null) { strImg2 = strImg2.substring(33, 153); }
String strImg3 = String.valueOf(plan_c.get('Image3__c')); 
if(strImg3 <> null) { strImg3 = strImg3.substring(33, 153); }
String strImg4 = String.valueOf(plan_c.get('Image4__c'));
if(strImg4 <> null) { strImg4 = strImg4.substring(33, 153); }

Plan__c pc = new Plan__c( Id = String.valueOf(plan_c.get('Id')), 
Image1__c = strImg1, Image2__c = strImg2, 
Image3__c = strImg3, Image4__c = strImg4 
);

 

 

Thanks 

 

logontokartiklogontokartik

I dont completely understand what you are trying to do here, If Image1__c is a RichText Area, try using <apex:outputField>. Something like

 

<apex:outputField value="{!pc.Image1__c}"/> 

MoUsmanMoUsman

Hi gopikrishna,

 

Please create a public property of Plan__c object as shown below.

 

Changes in Class :

public Plan__c pc {get;set;}

 

pc = new Plan__c( Id = String.valueOf(plan_c.get('Id')), 
Image1__c = strImg1, Image2__c = strImg2, 
Image3__c = strImg3, Image4__c = strImg4 
);

 

Changes in Visualforce:
 <apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!pc.Image1__c}" />
 
Note: If you need more clarification please post your complete code over here I will help you to write this piece of code.If it solved your issue please mark as solved to help other. 
--
Thanks
Usman

 

gopikrishnagopikrishna

Hi Kartik, Thank you for replay,

 

           i used <apex:outputfield> this is working fine when direct assigned the api but when convert string and cal to vf page that time not displayd, this is the problem. my requirement is display richtext box images in <apex:image> component. 

 

Thanks 

           

 

 

gopikrishnagopikrishna

Hi MoUsman, thank you for replay 

 

 

page:

 

<apex:repeat value="{!PlanData}" var="PlanData">
<apex:repeat value="{!PlanData}" var="plan_c">

 

<TR>
<TD CLASS = "pl_planIntro" ALIGN = "LEFT">
<DIV id="pl_animation" CLASS = "pl_slide" >
<!--<apex:outputField value="{!plan_c.Image1__c}" style="height:150px;width:205px"/>
<apex:outputField value="{!plan_c.Image2__c}" style="height:150;width:205"/>
<apex:outputField value="{!plan_c.Image3__c}" style="height:150;width:205"/ >
<apex:outputField value="{!plan_c.Image4__c}" style="height:150;width:205"/>-->
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image1__c}" />
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image2__c}"/>
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image3__c}"/>
<apex:image STYLE="PADDING: 2px; BORDER:2px solid #ccb" HEIGHT="150" WIDTH="205" value="{!plan_c.Image4__c}"/>
</DIV>
<apex:outputText escape="false" value="{!plan_c.Planintro__c}"/>
</TD>
</TR>

 

       my calss:

 

       

public List<List<Plan__c>> getPlanData(){ // Plan_Details : get data of all unique plan name
String strName = ''; // plan name holder
List<Plan__c> tempPlan = new List<Plan__c> (); // temporary plan list
List<List<Plan__c>> lstPlanData = new List<List<Plan__c>>(); // list to be returned by this method

for(Plan__c plan_c : g_lstPlanDB){
if(tempPlan.size() == 1000){
lstPlanData.add(tempPlan);
tempPlan = new List<Plan__c>();
}

if(strName.compareTo(String.valueOf(plan_c.get('Name'))) <> 0){

String strImg1 = String.valueOf(plan_c.get('Image1__c')); // image 1

system.debug('ssssssssssss'+strImg1 );
if(strImg1 <> null) { strImg1 = strImg1.substring(33, 153); }
String strImg2 = String.valueOf(plan_c.get('Image2__c')); // image 2
if(strImg2 <> null) { strImg2 = strImg2.substring(33, 153); }
String strImg3 = String.valueOf(plan_c.get('Image3__c')); // image 3
if(strImg3 <> null) { strImg3 = strImg3.substring(33, 153); }
String strImg4 = String.valueOf(plan_c.get('Image4__c')); // image 4
if(strImg4 <> null) { strImg4 = strImg4.substring(33, 153); }
String strIntro = String.valueOf(plan_c.get('PlanIntro__c')); // plan intro
if(strIntro == null){ strIntro = '<BR/>'; }
if(strIntro.length() < 100){ strIntro = strIntro + '<BR/><BR/><BR/><BR/><BR/>'; }

system.debug(strImg1+'image1===');
// populate new Plan__c with desired data
Plan__c pc = new Plan__c( Id = String.valueOf(plan_c.get('Id')),
Name = String.valueOf(plan_c.get('Name')), // Name
Planintro__c = strIntro, // PlanIntro__c
Guestroomtype__c = String.valueOf(plan_c.get('Guestroomtype__c')), // Roomtype__c
Image1__c = strImg1, Image2__c = strImg2, // Image1__c and Image2__c
Image3__c = strImg3, Image4__c = strImg4 // Image3__c and Image4__c
);
// add Plan__c list to temporary list of plan
tempPlan.add(pc);
}


// update string value of plan name
strName = String.valueOf(plan_c.get('Name'));
}
// add temporary list values to new Plan__c list
lstPlanData.add(tempPlan);
// return list
return lstPlanData;
}

 

Thanks

MoUsmanMoUsman

please you  VF page also.

gopikrishnagopikrishna

Hi MoUsman just now i added the vf page in previous post 

praveen murugesanpraveen murugesan
Gopi,

I hope this will help you,

Controller:

method()
{
for(Personal__c per : Personal__c)
{
        	string Img = per.Image__c;
        	if(Img!=null) 
		{
			Img=per.substringBetween('src="' ,'"');
		       	per.Image__c=Img.remove('amp;'); 
        	}    	  	
         }
        }
return wrapList;
}

Page:

<apex:pageblockTable value="{!wrapList}" var="pers" id="results" >

<apex:image url="{!pers.Image}" style="width:50px !important;height:50px !important;" />
</apex:pageblockTable>

Mark this as best answer if its helps.

Thanks.

Praveen Murugesan
GayatriGayatri
If Image1__c is a RichText Area, tried using <apex:outputField>. Something like
 
<apex:outputField value="{!pc.Image1__c}"/> 

And it worked for me.