I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encountering an issue where the images are not appearing as expected, and I am unsure of the reason behind this.
Below is a snippet of the code used to save the information:
https://i.stack.imgur.com/unjcQ.jpg$image = $_FILES['articleImg']['tmp_name'];
$date = date('l') .' '. date('d') . ', ' . date('Y');
$query = "INSERT INTO newsapp (title, company, category, details,
image, created) VALUES (:title, :company, :category, :details, :image, :created)";
$query_params = array(":title" => $_POST['title'],
":company" => $_POST['company'],
":category" => $_POST['category'],
":details" => $_POST['details'],
":image" => file_get_contents($image),
":created" => $date);
The following script is responsible for retrieving values from the database, including the images:
$query = "SELECT id, title, company, category, details, image, created FROM newsapp";
try {
$stmt = $db->prepare($query);
$stmt->execute();
} catch (PDOException $ex) {
die ('Failed to run query: ' . $ex->getMessage());
}
$row = $stmt->fetchAll();
echo json_encode($row);
Here is the Ajax function being utilized:
var url = "getnews.php";
$.ajax({
type: "POST",
url: url,
crossDomain: true,
cache: false,
success: function(data)
$.each(JSON.parse(data), function(i, value)
{
console.log(value.title); // return value from database
console.log(value.image); // Return null
});
I attempted to display the image using the given method, but encountered issues; upon inspecting the image value in the console, it returns null. Although, displaying the image directly via PHP functions correctly.
echo '<img alt="blog" src="data:image/jpg;base64,'.base64_encode( $rows['image'] ).'"/>';