Question

我正在我的网站上展示项目，但不是一次性显示所有项目我正在使用＆＃34;显示更多＆＃34;使用ajax加载更多项目的按钮。但我似乎无法打印出我加载的项目的图像，因为它是一个blob图像。另一个问题是我不知道如何一次打印2个项目，现在我一次只加载1个项目。

// AJAX

$('#show-more').on("click", function(e){  
  e.preventDefault();

  var lastID = $("#projects ul").children().last().attr('id');

  $.ajax({
    url: "ajax/show-more.php",
    type: "POST",
    data: {"lastID": lastID},
    dataType:"json"
  })
  .done(function( msg ){
    if (msg.succes == true) {

        $('#projects ul').append(

            "<li class='project' id='"+msg.project.id+"'>"+
                "<img src='data:image/jpg;base64, "+msg.project.image+"' alt='work'>"+
                "<div class='mask fade'>"+
                        "<h4>"+msg.project.titel+"</h4>"+
                        "<p>"+msg.project.text+"</p>"+
                "</div>"+
            "</li>"
        );
    }
  });
});

// show-more.php

<?php 
try {
    $db = mysqli_connect("localhost","root","","portfolio");
    $lastID = $_POST["lastID"];
    $sql = "SELECT * FROM work WHERE filter = 'webdesign' AND id < ".$lastID." ORDER BY id desc LIMIT 2";

    $results = mysqli_query($db,$sql);
    foreach ($results as $result) {
        $response["project"] = $result;
    }
    $response["succes"] = true;

} catch (Exception $e) {
    $response["succes"] = false;
}
echo json_encode($response);
?>

Answer 1

如果您想要多个结果保存数组中的行，也可以base64编码图像数据

foreach ($results as $result) {
    $result["image"] = base64_encode($result["image"]);
    $response["project"][] = $result;
}

然后循环结果

$.each(msg.project, function(){
    $('#projects ul').append(

        "<li class='project' id='"+this.id+"'>"+
            "<img src='data:image/jpg;base64, "+this.image+"' alt='work'>"+
            "<div class='mask fade'>"+
                    "<h4>"+this.titel+"</h4>"+
                    "<p>"+this.text+"</p>"+
            "</div>"+
        "</li>"
    );
});

Answer 2

我建议您将图像存储为文件而不是blob，并将路径存储在数据库中，以便您可以轻松使用它。如果数据不是由base64

编码，则btw base64将无法工作

在其中加载更多带有blob图像的项目

2 个答案: