Display Image on HTML image using javascript

Question

I am trying to display an image using javascript from mysql table and also using php. I have a table named ci_images and has a fields id, ci_ID, ciCode, Title, image. After getting the rows using the code sql statement below, I want to display it using javascript. But i am not getting the right result on this code. It always returns an object in Console of the browser (image). Please see code below

FIELDS:

id - int

ci_ID - int

ciCode - VarChar

Title - VarChar

image - LongBlob

PHP:

<?php
    include_once('pConfig.php');
    if (!isset($cID)){
        $cID = filter_input(INPUT_GET, "cIDs");
    }   
    if (!isset($ciCODe)){
        $ciCode = filter_input(INPUT_GET, "ciCodes");
    }   
    $stmt = $db->prepare("SELECT * FROM ci_images WHERE ci_ID = ? AND ciCODe = ?");
    $stmt->bind_param('is', $cID , $ciCode);
    $stmt->execute();
    $result = $stmt->get_result();
    if (!$result) {
        printf("Error: %s\n", mysqli_error($db));
        exit();
    }
    $json = mysqli_fetch_all($result, MYSQLI_ASSOC);
    echo json_encode($json);
?>

JAVASCRIPT:

function previewImages(cID){
        var ciCode = window.localStorage.getItem('ciCode');
        var xdata = ({'cIDs': cID, 'ciCodes': ciCode });
        $.ajax({
        type: 'GET',
        url: '../back_php_Code/pPrevImages.php',
        dataType: 'json',
        data: xdata,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            var cells = eval(response);
            alert(JSON.stringify(cells));
            for (var i=0; i < cells.length ; i ++){
                    $('#iSet').append('<div class="col-lg-4 col-sm-6">'
                    + '<div class="thumbnail">'
                    + '<div class="thumb">'
                    + '<a href="..\files\assets\images\gallery-grid\1.png" data-lightbox="9" data-title="' + + '">'
                    + '<img src="'+ + '" alt="" class="img-fluid img-thumbnail">'
                    + '</a>'
                    + '</div></div></div>');            
            }
        },
         error: function (error) {
            console.log(error);
        }
   });  
}

Return on Console.

Can someone help me to do the trick for this, I am stuck on this.

Thanks and Regards

Also, I have found something similar, but it does not work because , it only uses php and html. I think. Again Thanks

Link:

PHP display image BLOB from MySQL

score 2 · Answer 1 · answered Aug 19 '19 at 07:39

2

From PHP you are returning json string, so in javascript you do not have to eval the result, but decode it with JSON.parse.
Other than that you are returing a single record, not a list, why you are doing a for loop in javascript?

Your code will become:

function previewImages(cID) {
    var ciCode = window.localStorage.getItem('ciCode');
    var xdata = ({'cIDs': cID, 'ciCodes': ciCode });
    $.ajax({
    type: 'GET',
        url: '../back_php_Code/pPrevImages.php',
        dataType: 'json',
        data: xdata,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            // here you transform your response in a js Object
            var row = JSON.parse(response);

            $('#iSet').append('<div class="col-lg-4 col-sm-6">'
                    + '<div class="thumbnail">'
                    + '<div class="thumb">'
                    + '<a href="..\files\assets\images\gallery-grid\1.png" data-lightbox="9" data-title="' + row.YOUR_FIELD_FROM_DATABASE + '">'
                    + '<img src="' + row.YOUR_FIELD_FROM_DATABASE + '" alt="" class="img-fluid img-thumbnail">'
                    + '</a>'
                    + '</div></div></div>');
        },
         error: function (error) {
            console.log(error);
        }
   });
}

answered Aug 19 '19 at 07:39

Giacomo M

4,450
7
28
57

Hi sir, I just noticed that you have remove the looping part? – Ban Tot Aug 19 '19 at 07:50
I wrote on the post. You are returning a single record of the database, why you should do a loop? – Giacomo M Aug 19 '19 at 07:55
Ahh! ok Sir. but I am trying to get more than 1 record, the `ci_ID` and `ciCode` is foreign to. link from other tables. – Ban Tot Aug 19 '19 at 08:00
@AlexAbulencia, if the solution helps you, please accept the answer. May be you need to add the looping part as well. – Muhammed Shihabudeen Labba A Aug 19 '19 at 08:01
@AlexAbulencia are you sure you are getting several records? your select gets just 1. – Giacomo M Aug 19 '19 at 08:02
@MuhammedShihabudeenLabbaA Not yet sir. because something is missing on the code. also, it does not return the expected result, because, it thrown an error – Ban Tot Aug 19 '19 at 08:04
so please edit your question cause it does not explain exactly your problem. And, again, your select statement will not get several records, but just one – Giacomo M Aug 19 '19 at 08:06
@GiacomoM Have you tried the JSON.parse(response)? May I know the error you are getting – Muhammed Shihabudeen Labba A Aug 19 '19 at 08:06
@MuhammedShihabudeenLabbaA Yes I have tried it. the javascript does not enters the success function of ajax, it steps on error. – Ban Tot Aug 19 '19 at 08:18

Display Image on HTML image using javascript

1 Answers1