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

HyperBPP
HyperBPP used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015
Commented:
How large are the images? Perhaps a data URI could suffice?

Author

Commented:
They're small.  ~7kb.  Need to display as ~20x15px or so.  Looks like I encode them as base 64?
ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
Looks like I encode them as base 64?
Yes.
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Author

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

Most Valuable Expert 2015

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.

Author

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!

Author

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.
Most Valuable Expert 2015
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial