javascript - 使用 javascript 在 HTML 图像上显示图像

Question

我正在尝试使用 mysql 表中的 javascript 以及 php 显示图像。我有一个名为 ci_images 的表，其中包含字段 id、ci_ID、ciCode、标题、图像。使用下面的代码 sql 语句获取行后，我想使用 javascript 显示它。但我在这段代码上没有得到正确的结果。它始终在浏览器的控制台中返回一个对象(图像)。请参阅下面的代码

字段:

id - 整数

ci_ID - 整数

ciCode - VarChar

标题 - VarChar

图像 - LongBlob

PHP:

<?php
    include_once('pConfig.php');
    if (!isset($cID)){
        $cID = filter_input(INPUT_GET, "cIDs");
    }   
    if (!isset($ciCODe)){
        $ciCode = filter_input(INPUT_GET, "ciCodes");
    }   
    $stmt = $db->prepare("SELECT * FROM ci_images WHERE ci_ID = ? AND ciCODe = ?");
    $stmt->bind_param('is', $cID , $ciCode);
    $stmt->execute();
    $result = $stmt->get_result();
    if (!$result) {
        printf("Error: %s\n", mysqli_error($db));
        exit();
    }
    $json = mysqli_fetch_all($result, MYSQLI_ASSOC);
    echo json_encode($json);
?>

JavaScript:

function previewImages(cID){
        var ciCode = window.localStorage.getItem('ciCode');
        var xdata = ({'cIDs': cID, 'ciCodes': ciCode });
        $.ajax({
        type: 'GET',
        url: '../back_php_Code/pPrevImages.php',
        dataType: 'json',
        data: xdata,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            var cells = eval(response);
            alert(JSON.stringify(cells));
            for (var i=0; i < cells.length ; i ++){
                    $('#iSet').append('<div class="col-lg-4 col-sm-6">'
                    + '<div class="thumbnail">'
                    + '<div class="thumb">'
                    + '<a href="..\files\assets\images\gallery-grid\1.png" data-lightbox="9" data-title="' + + '">'
                    + '<img src="'+ + '" alt="" class="img-fluid img-thumbnail">'
                    + '</a>'
                    + '</div></div></div>');            
            }
        },
         error: function (error) {
            console.log(error);
        }
   });  
}

返回控制台。

有人可以帮我解决这个问题吗，我被困在这个问题上了。

感谢和问候

另外，我发现了类似的东西，但它不起作用，因为它只使用 php 和 html。我认为。再次感谢

链接:

PHP display image BLOB from MySQL

Answer 1

从 PHP 中，您将返回 json 字符串，因此在 javascript 中，您不必评估结果，而是使用 JSON.parse 对其进行解码。
除此之外，您要返回一条记录，而不是一个列表，为什么要在 JavaScript 中执行 for 循环？

您的代码将变为:

function previewImages(cID) {
    var ciCode = window.localStorage.getItem('ciCode');
    var xdata = ({'cIDs': cID, 'ciCodes': ciCode });
    $.ajax({
    type: 'GET',
        url: '../back_php_Code/pPrevImages.php',
        dataType: 'json',
        data: xdata,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            // here you transform your response in a js Object
            var row = JSON.parse(response);

            $('#iSet').append('<div class="col-lg-4 col-sm-6">'
                    + '<div class="thumbnail">'
                    + '<div class="thumb">'
                    + '<a href="..\files\assets\images\gallery-grid\1.png" data-lightbox="9" data-title="' + row.YOUR_FIELD_FROM_DATABASE + '">'
                    + '<img src="' + row.YOUR_FIELD_FROM_DATABASE + '" alt="" class="img-fluid img-thumbnail">'
                    + '</a>'
                    + '</div></div></div>');
        },
         error: function (error) {
            console.log(error);
        }
   });
}