How to display an image from a database using ajax

Question

I'm working on a simple mobile app that uses a database to store content including images and I'm using ajax to request the information and display that information on the app. The problem that I'm having is that the image don't appears and I don't know why

This is the code that I'm using to store the information

$image = $_FILES['articleImg']['tmp_name'];
$date = date('l') .' '. date('d') . ', ' . date('Y');

$query = "INSERT INTO newsapp (title, company, category, details,
image, created) VALUES (:title, :company, :category, :details, :image, :created)";
$query_params = array(":title" => $_POST['title'],
   ":company" => $_POST['company'],
   ":category" => $_POST['category'],
   ":details" => $_POST['details'],
   ":image" => file_get_contents($image),
   ":created" => $date);

I have this file to that return the values in the database including the image:

$query = "SELECT id, title, company, category, details, image, created FROM newsapp";
try {
  $stmt = $db->prepare($query);
  $stmt->execute();
} catch (PDOException $ex) {
  die ('Failed to run query: ' . $ex->getMessage());
}
$row = $stmt->fetchAll();
echo json_encode($row);

Ajax function;

var url = "getnews.php"; 
    $.ajax({
        type: "POST",
        url: url, 
        crossDomain: true,
        cache: false,
        success: function(data)
            $.each(JSON.parse(data), function(i, value)
            {
                console.log(value.title); // return value from database
                console.log(value.image); // Return null
});

I have tryied to display the image by doing this, but it didn't work; Then I checked the value of image on the console and it says null

if try to display the image directly on php works fine.

echo '<img alt="blog"  src="data:image/jpg;base64,'.base64_encode( $rows['image'] ).'"/>';

Your javascript seems a bit complex, why not simply do console.log(JSON.parse(data)); to check what's in it? — KIKO Software
– KIKO Software, Commented Mar 9, 2018 at 22:51
@KIKOSoftware if I do that it return all the info that is stored in the database, but the vlaue of image is 'null' — Pedro
– Pedro, Commented Mar 9, 2018 at 22:56
View the console, json_encode does not handle binary data so your value will be null, so instead build your src value on response append data:image/jpg;base64, and do your base64 encode in php or in the database with TO_BASE64. Or just encode it before storing. — Lawrence Cherone
– Lawrence Cherone, Commented Mar 9, 2018 at 23:11

jtheman · Accepted Answer · 2018-03-09 23:13:59Z

2

You could base64_encode() the image before storing it in the DB, for it being possible to json_encode() when retrieved from the BLOB field. (as Lawrence said above, json_encode doesn't handle binary data)

IE: change the insert data

":image" => file_get_contents($image),

to

":image" => base64_encode(file_get_contents($image)),

answered Mar 9, 2018 at 23:13

jtheman

7,5013 gold badges32 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

How to display an image from a database using ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related