php - 使用 javascript 显示图像二进制数据

Question

我正在尝试将存储在 db 中的图像作为 json 并使用 javascipt 显示图像。但无法查看图像。我尝试触发错误以查看 html 代码 img src 显示为空。

这是我从 db 表中获取数据的 php 代码：

<?php
header('Content-type: application/json');

include 'connect.php';

$b_id=$_GET['b_id'];
$c_id=$_GET['c_id'];

$sql_select=mysql_query("SELECT * FROM business_directory WHERE business_category_id=$b_id") or die(mysql_error());

$records = array();

if(mysql_num_rows($sql_select)>0){

while($row=mysql_fetch_array($sql_select)){
    $records[] = $row;  
}
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
}else{

    echo 'data not selected';
}
?>

这是javascript代码：

function get_business(){

$.ajax({
        url:'http://localhost/ajax_practice/php/get_business.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,

        success:function(data){
            $.each(data, function(i,item){
                var output="";
                    $(".gallery").append(output);

                        output+="<li>";

                        output+="<a href='category.html?b_id="+item.id+"' data-transition='slide' rel='external'>";
                        output+="<img src='"+item.business_icon+"'/>";
                        output+="<span>"+item.business_name+"</span";
                        output+="</a>";
                        output+="</li>";
                    $(".gallery").append(output);


            });
        }
    });

}

谁能帮助我，我如何从数据库中获取数据并使用 javascript 显示它。

Answer 1

你不能用json以二进制格式发送，所以你可以将它编码为base64字符串并作为字符串发送。在客户端，您可以使用

<img src="data:image/jpg;base64,base64Data" />

base64Data - 来自服务器的 base64 字符串

您可以查看更多信息，

使用 javascript 显示图像数据

Answer 2

我不确定存储在数据库中的图像格式是什么。你说它存储为json。

如果它已经是base64，试试这个

output+="<img src='data:image/png;base64,"+item.business_icon+"'/>";

或者如果它是二进制（原始图像），试试这个

output+="<img src='data:image/png;base64,"+atob(item.business_icon)+"'/>";

如果有奇怪的字符，要知道它只是item.business_icon在控制台上输出什么格式，那么它是二进制形式。

Answer 3

您需要将图像编码为 base64 并使用数据 urldata:image/png;base64,<DATA>

https://en.wikipedia.org/wiki/Data_URI_scheme

Answer 4

您可以使用

output +="<img style='width: 30px; width:50px;' src='data:image/png;base64,"+item.business_icon+"' />";