Question

我一直在尝试使用ajax和php来回显用户的个人资料照片，但除了空白页面外，我什么也没有。下面是我自己编写的ajax和php代码。

Ajax

$('#profile_photo').html('<img src="loading.gif" alt="loading..." width="20px" height="20px" >');

$(document).ready(function() {
    $.ajax( {    
        type: "GET",
        url: "profile_photo.php",             
        dataType: "html",   
        success: function(d) {                    
             $("#profile_photo").html(d); 
        }
    });
});

PHP（profile_photo.php）

<?php  
    // connect to db
    include 'db.php';

    // start session
    session_start();

    // user id 
    $id = $_SESSION['id'];
    $user = $_SESSION['name'];

    // variables

    // profile photo
    $profile_photo_query = mysqli_query($db_var, "SELECT * FROM users_profile_photo WHERE id = '$id'"); 
    while ($row = mysqli_fetch_array($profile_photo_query, MYSQLI_ASSOC)) {
        $set_profile_photo = $row["image"];
    }

        // for profile photo (encode with base64)
        if ($set_profile_photo == null) {
            echo "<img src='data:image/png;base64,".base64_encode(file_get_contents("profile_photo/default.png"))."' alt='".$user."' title='".$user."' onContextMenu='return false;'";
        } else {
            echo "<img src='data:image/png;base64,".base64_encode(file_get_contents("profile_photo/$set_profile_photo"))."' alt='".$user."' title='".$user."' onContextMenu='return false;'";
        }
?>

HTML

<div class="prev">
   <span id="profile_photo"></span>
</div>

Css（上一个）

.prev {
    width: 120px;
    height: 120px;
    border: 5px solid #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    overflow: hidden;
    margin-left: 10px;
    background-color: white;
    position: absolute;
    margin-top: -80px;
    z-index: 1000;
}
.prev img {
    width: 100%;
    height: 100%;
}

ajax成功加载了加载图像（.gif），但加载完成后显示空白页面。我想知道为什么未显示个人资料照片，因为我的php代码没有错误。

Answer 1

您正尝试通过ajax响应将img标记与php代码一起导入，您希望将其放入html代码中，因此请尝试此代码。

在javascript代码中

$(document).ready(function() {
$.ajax( {    
    type: "GET",
    url: "profile_photo.php",             
    dataType: "html",   
    success: function(d) {                    
         $("#image").attr("src", d);
    }
});
});

在php中，只是回显src而不是完整的img标签

 if ($set_profile_photo == null) {
        // echo just path of file
    } else {
        // echo just path of file
    }

以html

<div class="prev">
<img id="image">
</div>

Answer 2

不是加载.gif的Ajax。之前使用此代码完成：

$('#profile_photo').html('<img src="loading.gif" alt="loading..." width="20px" height="20px" >');

首先，您在此处的代码末尾缺少“>”：

echo "<img src='data:image/png;base64,".base64_encode(file_get_contents("profile_photo/default.png"))."' alt='".$user."' title='".$user."' onContextMenu='return false;'";

检查img src属性是否设置了任何内容。

Answer 3

我认为当您使用base64图像时，它没有显示。您可以将简单的src添加到图像中以显示图像。这是示例：

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

只需根据您的实际来源更改来源。

使用ajax和php从数据库中获取行

3 个答案: