Use jQuery to parse & display image from database –

Use jQuery to parse & display image from database –

Hello All;

Need some help with this one. The topic headline itself explains the scenario. I have some image files in DB for every shop/restro of my application; images stored as raw bytes. Now using a web API I am fetching them. Any shop may have several pics associated with it. The image files are being fetched in the format like the huge lengthy:

  1. /9j/4AAQSkZJRgABAQEASABIAAD/4ROwRXhpZgAATU0AKgAAAAgADgEOAAIAAAAgAAAAtgEPAAIAAAAgAAAA1gEQAAIAAAAgAAAA9gESAAMAAAABAAEAAAEaAAUAAAABAAABFgEbAAUAAAABAAABHgEoAAMAAAABAAIAAAExAAIAAAAgAAAABAAAC2gAAA     ……. 
etcetcetc

When I use alert to see the ‘photo_file’ data, I get to see the above ones.
Now I would like to reprocess it back and show the image files in my application. My ultimate goal is to show them as a slide show; but to begin with I first want to show them inside separate image controls like suppose, imgF1, imgF2, imgF3, imgF4. The huge format of the files that I am getting as data through my api looks like some base64 string although I am not fully sure. So how do I proceed to change it back into the image files? Hope this is possible by jQuery and I won’t need any other framework/plugin. In server side code, blob data, HttpPostedFileBase etc. I did use previously to tackle similar situations. Just don’t know how to write the same for client side jQuery code.

This is what I have so far:

  1. function processImageDataDB() {

                    var shpnm = $("#shp_nm").text();

                    $.ajax({

                        type: 'get',

                        url: "/api/restaurant/SelShopFotos/" + shpnm,

     

                        success:function(data)

                        {

                            if(data!=null)

                            {

                                var fotoData = $.parseJSON(data);

                                $(fotoData).each(function (i, obx) {

                                    //alert(obx.photo_file); ß just to see photo file content

                                });

                               

                               

                            }

                        },

                        error:function(err, xhr, status)

                        {

                            alert("internal error while fetching images for this bistro! "+err.statustext);

                        }

                    });

     

                }
So how do I proceed from here, is the question. I did Google some examples but none were close enough to my scenario. No use. So I need help from you. 

Thanks much in advance.