Извлечение строки из базы данных с использованием ajax и php

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

Я думаю, что при использовании изображения base64 оно не отображается. Вы можете просто добавить простой src к изображению для показа изображения. Вот пример:

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

Просто измените источник в соответствии с вашим фактическим источником.

Answer 2

Это не Ajax, который загружает .gif. Это сделано раньше с этим кодом:

$('#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

Вы пытаетесь импортировать тег img с php-кодом через ajax-ответ, который вы хотите поместить в свой html-код, что невозможно. Попробуйте этот код.

В коде JavaScript

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

В php просто echo 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>