如何使用ajax从数据库显示图像

时间:2018-03-09 22:44:31

标签: javascript php html json ajax

我正在使用一个简单的移动应用程序,该应用程序使用数据库来存储包含图像的内容,并且我使用ajax来请求信息并在应用程序上显示该信息。我遇到的问题是图片没有出现,我不知道为什么

这是我用来存储信息的代码  enter image description here

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

我有这个文件返回数据库中的值,包括图像:

$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功能;

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

我试图通过这样做来显示图像,但它没有工作; 然后我检查了控制台上图像的值,它显示 null

如果尝试直接在php上显示图像工作正常。

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

1 个答案:

答案 0 :(得分:1)

您可以在将图像存储到数据库之前base64_encode(),因为从BLOB字段中检索时可以json_encode()。 (正如劳伦斯上面所说,json_encode不处理二进制数据)

IE:更改插入数据

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

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