Send image to browser as a PHP post response

August 8, 2023

So, I’m making a post request with CURL:

<?php

$url = 'http://url/to/site';

$data = array(
  "tk" => $_GET["tk"]
);

$ch = curl_init($url);
//seteamos la petición
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FAILONERROR, true);

$response = curl_exec($ch);

if (curl_errno($ch)) {
  $response = curl_error($ch);
}

curl_close($ch);
echo $response;

and in the other site I’m doing a database search with the tk, and then sending a response:

$bs = new lecRed; //lecRed it's a class I created and used before

$tk = $_POST["tk"];

$rspta = $bs->searchByTK($tk)->fetchObject();//here I retrieve the info from the DB
$arr = array(
  "id"      => $rspta->ide,
  "name"  => $rspta->name,
  "adsc"  => $rspta->adsc,
  "pic" => $rspta->pic
);

echo "<h1>ID: " . $arr["id"] . "</h1>";
echo "<h1>NAME: " . $arr["name"] . "</h1>";
echo "<h1>ADSC: " . $arr["adsc"] . "</h1>";

So far it is working fine. But now I want to "echo" the image. I have the image in the server (in the same route as the last php file).

I tried doing:

echo "<img src='".$arr["pic"]."' />";

but it didn’t worked. I also tried:

$file = 'img/' . $arr["pic"];
$type = 'image/jpeg';
header('Content-Type:' . $type);
header('Content-Length: ' . filesize($file));
readfile($file);

but it only shows this weird characters:

I tried this:

$file = 'img/' . $arr["pic"];

if (file_exists($file)) {
  header('Content-Description: File Transfer');
  header('Content-Type: application/octet-stream');
  header('Content-Disposition: attachment; filename=' . basename($file));
  header('Content-Transfer-Encoding: binary');
  header('Expires: 0');
  header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
  header('Pragma: public');
  header('Content-Length: ' . filesize($file));
  ob_clean();
  flush();
  readfile($file);
  exit;
}

but it’s more of the same.

I also tried using de gd library:

header('content-type: image/jpeg');
$image_file_path = "img/" . $arr["pic"];

switch (pathinfo($image_file_path)['extension']) {
  case 'png':
    $image = imagecreatefrompng($image_file_path);
    break;
  case 'gif':
    $image = imagecreatefromgif($image_file_path);
    break;
  default:
    $image = imagecreatefromjpeg($image_file_path);
}

echo imagejpeg($image);
imagedestroy($image);

But nothing worked. I ran out of options. Anyone have any idea?

>Solution :

One solution is to use a "Data URL": <img src="data:...

https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html

Images encoded with Base64 can be embedded in HTML by using the
tag. This can help to increase the page load time for smaller images
by saving the browser from making additional HTTP requests.

Base64 encoding and Data URL go hand-in-hand, as Data URLs reduce the
number of HTTP requests that are needed for the browser to display an
HTML document.

The <img> tag has a src attribute and contains the Data URL of the
image. A Data URL is composed of two parts, which are separated by a
comma. The first part specifies a Base64 encoded image, and the second
part specifies the Base64 encoded string of the image.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
  //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />