더 많은 프로젝트에 BLOB 이미지가 있습니다.

Question

웹 사이트에 프로젝트를 표시하고 있지만 모든 프로젝트를 한 번에 표시하지 않습니다. 더 많은 프로젝트를 Ajax로로드하는 "더보기"버튼을 사용하고 있습니다. 하지만 그것은 blob 이미지이기 때문에로드 된 프로젝트의 이미지를 인쇄 할 수 없습니다. 다른 문제는 한 번에 2 개의 프로젝트를 출력하는 방법을 모르겠다는 것입니다. 이제는 한 번에 하나의 프로젝트 만로드합니다.

// 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>" 
     ); 
    } 
    }); 
}); 

// 쇼 - 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이 아닌 파일로 저장하고 쉽게 사용할 수 있도록 데이터베이스에 경로를 저장해야합니다. Btw base64는 데이터가 base64로 인코딩되지 않은 경우 작동하지 않습니다.