Problem when displaying image between html tags

Question

Problem when displaying image between html tags

Asked 5 years, 7 months ago

Viewed 202 times

2

I’m trying to display in a template images that are saved in a database, the insertion and the search of the image are done correctly, the display also, however to some extent, because when I try to display the image between html tags the screen turns all black with the image in the center as if it had not been found, for example:

<?php 
require_once '../customers/functions.php';
require_once(DBAPI);

$database =open_database();

$sql = "SELECT id, imagem FROM gema_vitrine WHERE id = 4";
$query = $database->query($sql);
$result = $query->fetch_assoc();
$foto = $result['imagem'];
Header( "Content-type: image/gif");
?>
<div>
    <?php echo $foto; ?>
</div>

The way the code is above, the page looks like this: http://prntscr.com/n4xlrj

Now if I remove the html tag the image is displayed correctly.

How can I fix this so that I can display the images coming from the database in an organized html template the way I want them to?

1 answer

Browser other questions tagged php html mysql web-application

You are not signed in. Login or sign up in order to post.

by Icaro Martins • **4,187** points · Answer 1 · 2019-03-30T04:30:53+00:00

From what you explained, I imagine your variable $result['imagem'] has the 'binary' of the image, to make a quick comparison would be as if you were running a file_get_contents('minhaimagem.gif') and playing for that variable, so it works when you put:

Header( "Content-type: image/gif");
echo $foto;   // <- $foto é equivalente ao dado de um file_get_contents('minhaimagem.gif')

In other words, your file php is playing the role of a file named in .gif. That said now you should already understand that when you add the tag div, or anything else to this 'binary' data you are transforming your image into a corrupt image as shown below:

Header( "Content-type: image/gif");
echo "<div>$foto</div>";

^{This is the same thing as you open an image as text file, write something, save and then try to open it as image.}

Solution 1

You can create another file and in it add the tag img passing as src the name of the file that is making the image paper.
Example:

Imagining that this file is called minha_imagem.php

Header( "Content-type: image/gif");
echo $foto;

Creates a new file called pagina.php or pagina.html and add the following code:

<html>
<head></head>
<body>
    <img src='minha_imagem.php'/>
</body>
</html>

Solution 2

Make a function that takes the 'binary' of the image and turns it into a dataURI

function dataURI( $bin )
{
    return 'data: image/gif;base64,'.base64_encode( $bin );
    // ^               ^
    // |   Estou imaginando que seja um gif
    // Vai gerar algo como "data: image/gif;base64,/9j/4AAQSkZJRgABAg...+LJGj21jxe//9k="
    //                                                                ^
    //                       Isso é uma string longa eu removi parte aqui
    //                       essa string pode ser utilizada como 'src' de uma imagem
}

^{If you have the image file name you can use a function like the mime_content_type ( $nome_do_arquivo ) to get that information image/gif}

And use it on your page as shown in the example:

require_once '../customers/functions.php';
require_once(DBAPI);

$database =open_database();

$sql = "SELECT id, imagem FROM gema_vitrine WHERE id = 4";
$query = $database->query($sql);
$result = $query->fetch_assoc();
$foto = $result['imagem'];

// Header( "Content-type: image/gif");

function dataURI( $bin )
{
    return 'data: image/gif;base64,'.base64_encode( $bin );
}

$foto = dataURI($foto);

echo "<div> <img src='$foto'/> </div>";