图像不在json页面中显示

the images from the database is not coming out in the json page and the html page but the image source name is outputted. how do I make the images show on the html page?

Thank you for your precious time.

linejson.php page

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("localhost", "db_user", "db_pwd", "db_name");

$result = $conn->query("SELECT tbl_users.image, tbl_users.firstname, tbl_users.lastname, tbl_users.username,    tbl_posts.post, tbl_posts.post_date
                    FROM tbl_posts INNER JOIN tbl_users ON  tbl_users.id=tbl_posts.user_id
                    WHERE tbl_posts.user_id=3");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}

$outp .= '{"Image":"'  . $rs["image"] . '",';
$outp .= '"Firstname":"'   . $rs["firstname"]     . '",';
$outp .= '"Lastname":"'  . $rs["lastname"] . '",';
$outp .= '"Username":"'   . $rs["username"]        . '",';
$outp .= '"Post":"'   . $rs["post"]        . '"}';

}
$outp .="]";

$conn->close();

echo($outp);
?>

linejson.html page

<!DOCTYPE html>
<html>

<head>
<style>

 table, th , td  {
 border-top: 1px solid purple;
 border-collapse: collapse;
 padding: 15px;

}
table tr:nth-child(odd) {
background-color: #f0f1f1;

}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>

<body>
<div id="timeline"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.outpaceng.com/linejson.php";

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(xmlhttp.responseText);
  }
  }
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";

for(i = 0; i < arr.length; i++) {
    out += "<tr><td>" +
    arr[i].Image +
    "</td><td>" +
    arr[i].Firstname +
    "&nbsp;" +
    arr[i].Lastname +
    "&nbsp;" +
    arr[i].Username +
    "<br>" +
    arr[i].Post +
    "</td><tr>" ;

   }
   out += "</table>";
   document.getElementById("timeline").innerHTML = out;
 }
 </script>

</body>
 </html>

The code can be sipmlified and you should use json_encode for creating json

change this

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}

$outp .= '{"Image":"'  . $rs["image"] . '",';
$outp .= '"Firstname":"'   . $rs["firstname"]     . '",';
$outp .= '"Lastname":"'  . $rs["lastname"] . '",';
$outp .= '"Username":"'   . $rs["username"]        . '",';
$outp .= '"Post":"'   . $rs["post"]        . '"}';

}
$outp .="]";

$conn->close();

echo($outp);

echo json_encode($result->fetch_all());
$conn->close();

and JavaScript

for(i = 0; i < arr.length; i++) {
    out += "<tr><td><img src='" +
    arr[i].image +
    "' alt="img"/></td><td>" +
    arr[i].firstname +
    "&nbsp;" +
    arr[i].lastname +
    "&nbsp;" +
    arr[i].username +
    "<br>" +
    arr[i].post +
    "</td><tr>" ;
}