Question

我试图将图像存储在db中作为json并使用javascipt显示图像。但无法查看图像。我尝试了fire bug来查看html代码，img src显示为null。

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

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


            });
        }
    });

}

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

Answer 1

您无法使用json以二进制格式发送它，因此您可以将其编码为base64字符串并将其作为字符串发送。在客户端，您可以使用

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

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

您可以看到更多信息，

Showing image data using javascript

Answer 2

您需要将图片编码为base64并使用数据网址data:image/png;base64,<DATA>

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

Answer 3

我不确定数据库中存储的图像格式是什么。你说它存储为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 4

您可以使用

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

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

4 个答案: