how to display blob type images stored in MySql database on a jquerymobile template

Question

I have a scenario where images should be displayed in my Jquerymobile template. These images come from MySQL database. Image type is blob type, and I am using PHP to retrieve my data - as follows

    <?php
include 'configure.php';
$qr = "SELECT * FROM food_beverage";
$res= mysql_query($qr);
$i=0;
while($row = mysql_fetch_array($res))
{
$restau_arr[$i]["fb_sno"] = $row["fb_sno"];
$restau_arr[$i]["fb_name"] = $row["fb_name"];
$restau_arr[$i]["fb_type"] = $row["fb_type"];
$restau_arr[$i]["fb_location"] = $row["fb_location"];
$restau_arr[$i]["fb_img"]= $row["fb_img"];
$restau_arr[$i]["fb_phno"]= $row["fb_phno"];
$restau_arr[$i]["fb_email"]= $row["fb_email"];
$i++;
}
 header('Content-type: application/json'); 
  echo json_encode($restau_arr);
?>

The values from database are stored in an array, and are being converted to JSON format so that I can call them using the following jquery lines -

var url = "retrieve_all.php";   
     $.getJSON(url, function(json) {
                 .......
                  .......
                   ....... }

Once the values are received at this function, am appending them to respective HTML fields using -

 $.each(json, function(i,v) {                                     
                    var restauName = v.fb_name;
                    var restauLoc = v.fb_location;
                    var restauNum = v.fb_phno;
                                    var restauImg = v.fb_img;
                    $("#restauName").html(restauName);
                    $("#restauLoc").html(restauLoc);
                    $("#restauNum").html(restauNum);
                    $("#restauImg").html(restauImg);
                    });

I am able to understand that the image should NOT be taken as a JSON format. But how can this be dealt? What should I do in PHP to get my blob image displayed on my page/screen?

Is the approach correct?

For this, I checked here for help in the beginning, but my scenario seemed to be different.

Answer 1

This is more of notes that will give you a solution, than "click here for results"; but try this:

• Aside from the images you have a functioning solution?
• Are the images large?
  • If they are icons, I would embed the image data in the same JSON response (see end)
  • If they are photos, I would return an URL, and have a second HTTP request to download them. You can attach <img> elements to a document via AJAX response handlers.
  • The image serving script would take the ID, validate it, then return the DB field value.
  • You will need to ensure there is no charset conversion on your binary data, or the images will be corrupted.

To embed everything in a single response

• rfc2397
• Make the image JSON item look like:
  • data:image/jpeg;base64,base_64_encoded_jpeg_goes_here
  • Obviously you can change the mime encoding to suit your needs.
• Add some JS to take this string, append an <img> element, with that data as the src attribute.

I have a rough demo of JSON to img elements (with external files).