Display base64 encoded image on a browser when hitting a specific url

Question

I want to display a image that is encoded with base64_encode. The image is fetching from mysql db based on the id parameter passed through the URL. The Content-type has been set. Say i have a code in index.php file and i am hitting that file in browser with url localhost:8080/products_images/index.php?id=1000

header('Content-Type:image/png');
if (isset($_GET['id'])) {
$id = $_GET['id'];
} 

$sql = "SELECT image FROM table WHERE id = ".(int)$id;

$image = $dbInstance->getArray($sql);
unset($sql);
echo '<img src="data:image/png; base64,'.$image[0]['image'].'"/>';

Instead of displaying the image on a browser, it says The image “localhost:8080/products_images/index.php?id=1000” cannot be displayed because it contains errors.

I know its happening because on a browser DOM, i can clearly see the image tag appearing like following <img src="localhost:8080/products_images/index.php?id=1000"> Instead of showing the encoded string to img src tag, its showing the whole URL. Any help would be appreciated!

Your script doesn't actually output anything. What are you expecting to see? — Alex Howansky, Jan 04 '19 at 17:49
hey, thanks for quickly replying here. i have edited the code. please check it now. — faran, Jan 04 '19 at 17:53
@Juan yeah i am sure and tested that i am getting the correct base64 encoded image here. — faran, Jan 04 '19 at 17:54
This question is attracting too many low-quality answers. This should probably be flagged for moderation and ask that some form of protection be set to it. — Funk Forty Niner, Jan 04 '19 at 17:56
@Juan may you please have a look on code? i have again updated to make it more clear. — faran, Jan 04 '19 at 18:07
@Juan no i don't have any js code instead hitting that index.php file and trying to display the base64 encoded image on browser — faran, Jan 04 '19 at 18:09
All I can think of is that you probably have something else above the header, maybe some HTML, could be a BOM (byte order mark) issue. Edit: and/or add an `exit;` at the end of your script. Or place the header just above the echo and with an `exit;`. — Funk Forty Niner, Jan 04 '19 at 18:21
tried but unfortunately nothing happened. Same result. regarging BOM issue you are talking about, i checked there is no html above the header. — faran, Jan 04 '19 at 18:30
If you right click to see the view source you get the same as with inspect? — Juan, Jan 04 '19 at 18:40
Also can you add a print_r($image[0]['image']) to see what comes out? — Juan, Jan 04 '19 at 18:43
@Juan i tried urlencode the base64 string but no progress yet. — faran, Jan 04 '19 at 18:59
By the way, content type should be text/html, you are sending text not an image — Juan, Jan 04 '19 at 19:00

Paragoumba · Answer 1 · 2019-01-04T18:28:31.083

To send the image to the client, you might try to load the image from the string with imagecreatefromstring function then send it to the client with imagepng function, it should give you something like that:

<?php
    $data = 'iVBORw0KGgoAAAANSUhEUgAAABwAAAASCAMAAAB/2U7WAAAABl'
    . 'BMVEUAAAD///+l2Z/dAAAASUlEQVR4XqWQUQoAIAxC2/0vXZDr'
    . 'EX4IJTRkb7lobNUStXsB0jIXIAMSsQnWlsV+wULF4Avk9fLq2r'
    . '8a5HSE35Q3eO2XP1A1wQkZSgETvDtKdQAAAABJRU5ErkJggg==';

    $data = base64_decode($data);
    $im = imagecreatefromstring($data);

    if ($im !== false) {

        header('Content-Type: image/png');

        // Send the image
        imagepng($im);

        imagedestroy($im);

    } else {

        echo 'An error occurred.';

    }
?>

I got it from the php doc

Display base64 encoded image on a browser when hitting a specific url

1 Answers1