javascript - 使用 Ajax 和 SQL 时，数据库中的图像未显示在我的 HTML 中

Question

我需要帮助来检索上传到我的数据库以显示在我的 HTML 中的图像。如果有人能帮助我，我将不胜感激。

这是我的 Ajax 代码。

$(document).ready(function() {
    $.ajax({
        url:"../controller/image.php",
        dataType:"json",
        type:"POST",
        data:{
            method:"getall"
        },
        success: function(resp) {
            console.log(resp);
            for(var i = 0; i<resp.length; i++){
                var img = document.createElement("img");
                var div = document.createElement("div");
                var h = document.createElement("h4");
                img.innerHTML = img.src + ":"+resp[i].title;
                img.onclick = function() {
                    console.log(resp);     
                }
            }
        }
    });
});

这是我的 PHP 代码。

function getall() {
    global $db;
    $query = "SELECT * FROM images";
    $result = $db->query($query);
    $row = $result->fetchAll();
    echo json_encode($row);
}

我已将我的图像加载到我的数据库中，我可以通过控制台看到它们是它们的......但无法看到它们。谢谢。

Answer 1

由于您的新评论，我有了另一个答案:

1. 不要使用图像的 innerHTML 属性。这是错误的。

   img.innerHTML = img.src + ":"+resp[i].title;
   

   相反，您必须填写 src 属性:

   img.src = resp[i].link
   

2. 您的代码中没有插入页面。创建元素(例如 document.createElement)不会将其插入页面，而只会在内存中创建它。要显示创建的图像，您必须将它们添加到任何页面元素。从示例到页面正文:

   document.body.appendChild(img)
   

   或任何其他元素，通过选择它:

   document.getElementById('imagesWrapper').appendChild(img)
   

3. 所有代码都假定图像已正确上传到您的服务器并且它们的相对路径存储在数据库字段 link