How to Append image using Json - php

Question

I am creating an e-commerce site. i ran into the problem of displaying image on home page. all relevant data have displayed success. the only image couldn't be displayed.I didn't get any errors while checking the console.
what i tried so far i attached below.
Json **$("#Products").append("<img id='theImg' src='images/' + data[i].image + ' />'");** this is image append code i written.
function getProducts(){
$.ajax({
type: 'GET',
url: 'all_product.php' ,
dataType: 'JSON',
success: function (data) {
console.log(data);
for (var i = 0; i < data.length; i++)
{
$("#Products").append("<img id='theImg' src='images/' + data[i].image + ' />'");
$('#Products').append('<h5>' + data[i].description + '</h5>');
$('#Products').append('<p>' + data[i].price + '</p>');
}
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
}
all_product.php
<?php
include("db.php");
$stmt = $conn->prepare("select id,cat_id,brand_id,price,description,image,keywords from products order by id DESC");
$stmt->bind_result($id,$cat_id,$brand_id,$price,$description,$image,$keywords);
if($stmt->execute())
{
while($stmt->fetch())
{
$output[] = array("id"=>$id, "cat_id" =>$cat_id, "brand_id"=> $brand_id,"price"=> $price, "description"=> $description,
"image"=> $image, "keywords"=> $keywords);
}
echo json_encode($output);
}
$stmt->close();
?>
Design
<div class="card" style="width: 18rem;" id="Products">
<img id="theImg">
<div class="card-body">
<h5></h5>
<p class="card-text"></p>
Go somewhere
</div>
</div>

Answer 1

You have to change the code as following. You are missing a a double qoutes which makes variable as stirng.
$("#Products").append("<img id='theImg' src='images/" + data[i].image + "' class='your-css-class' />");