Problem in Displaying image Using RestApi

Question

Am unable to display image which is there in external site .When am Displaying am getting like this

core.filemanager.FileBlobValue@4747ae4b 

here is my code

public class RestImage {

public blob image {get;set;}


public string code {get;set;}

public string values {get;set;}
public void myConnection(){

s= new SampleLead__c();
http p =new http();

httprequest req= new httprequest();

req.setEndpoint('http://1.cuzillion.com/bin/resource.cgi?sleep=10');
req.setMethod('GET');
req.setTimeout(11000);
httpresponse res= p.send(req);
code=res.getStatus();
values=res.getBody();
image=res.getBodyAsBlob();

}
}

her is my VisualForce page

<apex:page controller="RestImage" action="{!myConnection}">
  {!code}{!values}
  <apex:form >

  {!image}</apex:form>
</apex:page>

Answer 1

You can use inline the Data URI scheme:

Amend your Apex class with the following:

public blob image {get;set;}
...
public void myConnection(){
    ...
    image=EncodingUtil.base64encode(res.getBodyAsBlob());
}

Then update your Visualforce page:

<apex:image value="data:image/gif;base64,{!Image}" />

Interesting that you are stalling runtime using a sleepy URL ;-)

Answer 2

Why not just use a img tag setting the src to the external site?

<img src="http://1.cuzillion.com/bin/resource.cgi?sleep=10" />

I've noticed that you are trying to test something about loading performance, isn't? remember the browser load the img contents in an async way.