Display the image inserted in mysql using php and javascript?

Question

I am trying to Display an image inserted on my database with a longblob data type. But it does not actually returns the expected output. No images has been shown on my form. And this is what I get on the php script.

Also, this is the code I am working with:

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);
?>

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);s
              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="'+ cells[i].Image + '" data-lightbox="9" data-title="' + cells[i].Title + '">'
                    + '<img src="'+ cells[i].Image + '" alt="" class="img-fluid img-thumbnail">'
                    + '</a>'
                    + '</div></div></div>');            
            }
        },
         error: function (error) {
            console.log(error);
        }
   });  
}

I hope someone can help me to do the trick in here, i've been stuck on this on a week. Thank you and Regards

UPDATE:

database fields

@Cid , i'm sorry sir, that is my fault, did not notice it on my code. — Ban Tot
– Ban Tot, Commented Aug 20, 2019 at 7:24
But I already Add it, and nothing happens, the same status as before — Ban Tot
– Ban Tot, Commented Aug 20, 2019 at 7:25

tom · Accepted Answer · 2019-08-20 07:20:33Z

2

Echo your php result. Put this at the end of php file:

echo json_encode($json);

And to display an image blob in that way you try it, you should encode the blob

base64_encode($yourBlob)

send it back to your front-end and inject it to the img src attribute.

<img src="data:image/jpeg;base64,' + dataEncoded + '>

edited Aug 20, 2019 at 7:20

answered Aug 20, 2019 at 7:05

tom

11k6 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ban Tot Over a year ago

Hi Sir, Where should I put base64_encode If I already echo the final result? Can you add this answer sir on my code? Thank you.

Ban Tot Over a year ago

Hi Sir, After clearing the cache of my web browser. This is what i get now. What should I do then? See UPDATED Image

tom Over a year ago

Before echoing modify $json $json['theBlobFieldName'] = base64_encode($json['theBlobFieldName']);

Ban Tot Over a year ago

Ok Sir, I'll give it a shot. But Sir, Can you see the result after adding your answer?

tom Over a year ago

How do you store the images to the db?

|

Collectives™ on Stack Overflow

Display the image inserted in mysql using php and javascript?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related