Printing <img> to ColdFusion web app client from server side JSON

I'm working with ColdFusion 9 and JQuery datatables.

I'm using the JQuery databasles server side data capability to page through large datasets.  I want to display images in one the fields of the dataset.  My images reside outside the webroot for security reasons.  

How can I pull the image from the location on the server drive to display in the table.  I know I could use cfimage except for the data be returned to the client is JSON.

Is there a way to temporarily load the image in the browser memory so that the img tag can access it?
LVL 6
HyperBPPAsked:
Who is Participating?
 
käµfm³d 👽Connect With a Mentor Commented:
How large are the images? Perhaps a data URI could suffice?
0
 
HyperBPPAuthor Commented:
They're small.  ~7kb.  Need to display as ~20x15px or so.  Looks like I encode them as base 64?
0
 
käµfm³d 👽Commented:
Looks like I encode them as base 64?
Yes.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
HyperBPPAuthor Commented:
Ok, I'm doing the below, and it works except for the color of the icon gets changed.  Almost like a color negative.  Any thoughts?

<cfset thisFile = '#myIcons#unitIcon/#qFiltered.ICON#'>
	
	<cfimage
		name="photo"
		action="read"
		source="#thisFile#"
		/>
	
	<cfset qFiltered.ICON = '<img
src="data:image/*;base64,#toBase64( photo )#"
height="20"/>'>

Open in new window

0
 
_agx_Commented:
What kind of image - jpg, png, ..?

As a test, do a <cfimage action="writeToBrowser" ...> of #photo# on a separate page. Are the image colors still wrong? Edit  If yes, it suggests a problem with the image itself. Try the same test with a few other images.  If no, it's a problem with the base64 function.
0
 
HyperBPPAuthor Commented:
@_agx_

They are .png.

Tried the <cfimage action="writeToBrowser" ...> which worked fine.  If it's a problem with the base64 function what can I do?  Do I use a different function, or are my parameters wrong?

Thanks!
0
 
HyperBPPAuthor Commented:
And another tidbit of info.  Just found that the images work in FireFox (with the coloring wrong) but do not display in Internet Explorer at all.
0
 
_agx_Connect With a Mentor Commented:
Sorry I should've said "suggests a problem with the base64 function" not that it definitely *is* that function.  Something could be going wrong with the transfer through jquery.  You need to rule that out.  Add the same "<img> tag directly to your test page. Does it display correctly?

ie   <cfoutput>
          <img src="data:image/*;base64,#toBase64( photo )#" height="20"/>
     </cfoutput>

You could also try reading the image binary and converting that to base64 - instead of using cfimage.

http://www.bennadel.com/blog/2002-Creating-Base64-Encoded-Data-URLs-For-Images-In-ColdFusion.htm
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.