I have been trying to echo users profile photo using ajax and php but i get nothing but a blank page. Below is my ajax and php code which I have written myself.
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)
.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%;
}
The ajax loads the loading image (.gif) successfully but shows a blank page when loading image is done loading. I will like to know why the profile photo is not been shown because my php code has no errors.
Its not the Ajax that loads the .gif. Its done before with this code:
$('#profile_photo').html('<img src="loading.gif" alt="loading..." width="20px" height="20px" >');
First of all, you are missing an ">" at he end of your code here:
echo "<img src='data:image/png;base64,".base64_encode(file_get_contents("profile_photo/default.png"))."' alt='".$user."' title='".$user."' onContextMenu='return false;'";
Check if anything is set to the img src attribute..
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments