Embedded image
by gregs on Mar.13, 2007, under ColdFusion
A client recently decided to start storing all of their images in a database and usually we would point the image source to a cfm page, where we'd do something like this:
CODE:
-
request.uploadedPic = application.staffManager.getStaffImage(session.user.getId());
-
context = getPageContext();
-
context.setFlushOutput(false);
-
response = context.getResponse().getResponse();
-
out = response.getOutputStream();
-
response.setContentType("image/jpeg");
-
response.setContentLength(arrayLen(request.uploadedPic['staffPhoto'][1]));
-
out.write(request.uploadedPic['staffPhoto'][1]);
-
out.flush();
-
response.reset();
-
out.close();
Which worked nicely until I read about some performance issues with http calls and the cfdocument tag. Zac (yes his name pops up a lot in this blog), put me onto directly embedding the image into the source, like such:
CODE:
-
<img src="data:image/jpeg;base64,<cfoutput>#BinaryEncode(request.uploadedPic['staffPhoto'][1],'Base64')#</cfoutput>" alt="Embedded Image" />
No need to make a http call to display the image anymore.
3 Comments for this entry
1 Trackback or Pingback for this entry
-
gregs » Blog Archive » Embedded images an IE work around
May 18th, 2008 on 10:13 pm[...] while back I posted about using the data:image/jpeg;base64 to directly embed the image in to the source attribute of an [...]
March 15th, 2007 on 1:14 pm
Does that embedded data thing work on all the modern browsers? That is totally awesome.
Also, all that stuff you are doing in the first example was all required pre MX7 (getting the underlying byte stream and all). If you are on MX7, you can use the CFContent / variable attribute to stream binary data to the client:
March 16th, 2007 on 12:40 am
I thought this method only worked in FireFox?
You should embed a test image in this post, then we can all try it out.
March 16th, 2007 on 9:41 am
It works for both FireFox and Safari. Just had a quick go using IE7 and sadly this trick doesn’t work.