如何通过 AJAX 显示来自 MySQL 的 BLOB 图像？答案

【问题标题】：How to display BLOB image from MySQL through AJAX?如何通过 AJAX 显示来自 MySQL 的 BLOB 图像？
【发布时间】：2019-05-13 14:21:18
【问题描述】：

我需要有关如何显示 MySQL 数据库中的 LONGBLOB 图像的帮助。我从一个 PHP 文件中获取图像，该文件从 MySQL 数据库中选择了图像。另外，我将 AJAX 中的值附加到 HTML。所以在 HTML 中，表格中应该有一列有图像。但它没有显示。这是当前外观的示例。

https://drive.google.com/open?id=1M-GVR9STfwzjLLOOnj7qHTFBT4POZ5rL

目前在 AJAX 部分，我在 img src 的列中使用 base64。请帮助我。谢谢你。这是我的代码。

//For search country function
$("#search-btn").on("click", function () 
    {   
        if(document.getElementById("search").value.length < 3)
        {
            alert("The characters MUST NOT be less than 3!");
            return false;
        }


        $("#records").empty();
        $(".records").empty();
        $('.searchResults').empty();

        var searchCountry = $("#search").val();

        $.get(
                'searchCountryRecords.php',
                {id: searchCountry}, //left->sql id ,right->script id
                function (data)
                {
                    if (!$.trim(data)){   
                        alert("No country with that name is found!");
                        return false;
                    }

                    var userRole = "<?php echo $userRole; ?>";

                    var string = "";

                    string += '<table id="tbl_countries" class="table table-bordered table-hover">';
                    string += '<tr>';
                    string += '<th>Flag</th>';
                    string += '<th>Country Name</th>';
                    string += '<th width=200px>Region</th>';
                    string += '<th>Surface Area</th>';
                    string += '<th>Population</th>';
                    string += '<th width=150px>Independent Year</th>';
                    string += '<th width=100px>City Details</th>';
                    if (userRole === "admin")
                    {
                        string += '<th width=100px>More Details</th>';
                        string += '<th width=100px>Update Details</td>';
                        string += '<th width=100px>Upload Flag</td>';
                    }
                    string += '</tr>';

                    /* from result create a string of data and append to the div */
                    $.each( data, function( key, value ) 
                    { 
                        $("#records").empty();
                        string += "<tr>";
                        //string += "<td>"+"<img src='data:image/png;base64,base64_encode("+value['image']+")"+"'/>"+"</td>";
                        string += "<td>"+"<img src='data:image/jpeg;base64', value="+value['image']+">"+"</td>";
                        string += "<td>"+value['Name']+"</td>";
                        string += "<td>"+value['Region']+"</td>";
                        string += "<td>"+value['SurfaceArea']+"</td>";
                        string += "<td>"+value['Population']+"</td>";
                        string += "<td>"+value['IndepYear']+"</td>";
                        string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#cityModal' id='city_details' name='city_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
                        if (userRole === "admin")
                        {
                        string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#countryModal' id='more_details' name='country_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
                        string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#updateModal' id='update_HOS' name='update_HOS' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-edit'></i></button>" + "</td>";
                        string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#uploadModal' id='upload_flag' name='upload_flag' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-flag'></i></button>" + "</td>";
                        }
                    string += "</tr>";
                    }); 

                    string += '</table>'; 
                    $("#records").append(string); 
                }
            );
    }); // end of search function

【问题讨论】：

标签： javascript ajax base64 blob

【解决方案1】：

您不能将二进制数据嵌入到 JSON 中，因为它会被损坏。这就是为什么您的服务器应该在将图像发送到客户端之前将其编码为 Base64。作为一个糟糕但简单的示例：如果您使用的是 MySQL 5.6+，您可以将 TO_BASE64(image) AS b64_image 添加到您的 SELECT 语句中。但为了获得更好的性能，请使用 PHP 而不是 MySQL 将图像编码为 Base64。

另外，您需要通过替换来修复您的 JavaScript 代码：

"<td>"+"<img src='data:image/jpeg;base64', value="+value['image']+">"+"</td>";

与：

"<td><img src='data:image/jpeg;base64',"+value['b64_image']+"></td>";

【讨论】：