JQuery：通过ajax检索和显示存储为blob的图像

Question

所以我有一些 JPEG 图像以 blob 形式存储在 mysql 数据库中。数据库中的每一行都有一个用于照片的 longblob 和另一个用于缩略图的 blob。我可以通过...检索图像

<?php
require_once("connect.php");
$id = $_GET['id'];
if ( $_GET['thumb'] === "true" ){
    $query = "SELECT thumb, t_mime, t_size FROM images WHERE image_id = '".$id."';";
}else{
    $query = "SELECT data, mime, size FROM images WHERE image_id = '".$id."';";
}

$result = mysql_query($query);
$image = mysql_fetch_row($result);

header('Content-length: ' . $image[2]);
header('Content-type: ' . $image[1]); 
print $image[0];
?>

并通过<img src="pull.php?id=300&thumb=false"...</img> 调用它。现在，当它仍然是服务器端时，这一切都很好。但是，在用户拥有 html 后，如何在页面上获取图像？我一直在使用 jquery。到目前为止，我得到的是该页面显示了一个缩略图列表，每个缩略图在 alt 文本中都有 #id，然后我就这样做了......

$("div.imgDiv").click(function(){ 
    image_id = $(this).children(".thumbnail").attr("alt");
    $.ajax({
        url :   'pull.php?id='+image_id+'&thumb=false',
        success: function(data){
            $("img#main_photo").replaceWith("<img alt='welcome' src='"+data+"' id='main_photo'");
        }
    });
});

好消息是我得到了数据，坏消息是它似乎不想将其转换为图像；我只是得到一串文本。我希望它将主照片替换为与我刚刚单击的缩略图相对应的照片。

有什么想法吗？

Answer 1

您只需将 img 标记指向该 url 以供浏览器处理。您不想将其加载到 DOM 中。