Mapping blob image from mysql database to dynamic div in html

Question

I have a BLOB image that is stored when a user submits an ad form, they have the choice to upload a single image. The image is saved in a database with other information.

Every time my page loads it, a div of advertisements is dynamically created, and the corresponding information from my database in the div is also filled.

The problem I am facing at the same time displays all the information, including the image together, so when the user clicks on the page view, they see each div with a different image and information. I saw other posts on how to display an image, but I doubt the same method when you display multiple images from the same database.

My database is configured as follows:

ID ADTITLE EL. ADDRESS PRICE DESCRIPTION CATEGORY name type size content DATE

Bold variables for image / blob

Here is my code where I extract the information:

$Category = 'Specials'; 
$query = $pdo->prepare("SELECT * FROM adsubm WHERE CATEGORY LIKE '%$Category%' ORDER BY DATE DESC" );
$query->execute();

while($row = $query->fetch()) {
    $Adtitle=$row['ADTITLE'];
    $Desc=$row['DESCRIPTION'];
    $Price=$row['PRICE'];
    $Date=$row['DATE'];
    $timestamp=strtotime($Date);
    $Day= date("d",$timestamp);
    $Month=date("F",$timestamp);
    $Newmonth=date('M', strtotime($Month . '01'));
    $Year=date("Y",$timestamp);
    header('Content-type: image/jpeg');
    $Image=$row['content'];


echo  " 
           <div class='[ col-xs-12 col-sm-offset-2 col-sm-8 ]' style='margin-top: 10px'>
                <ul class='event-list'>
                    <li>
                        <time datetime='$Date'>
                            <span class='day'>$Day</span>
                            <span class='month'>$Newmonth</span>
                            <span class='year'>$Year</span>
                            <span class='time'>ALL DAY</span>
                        </time>
                        <img alt='#' src='$Image/>
                        <div class='info'>
                            <h2 class='title'>$Adtitle</h2>
                            <p class='desc'>$Desc</p>
                                                        <ul>
                                <li style='width:50%;'><span class='fa fa-money'></span>  $Price</li>
                            </ul>
                        </div>

                    </li>
                              </ul>
                    </div>
        ";

My php skills are also newbies. I just try to make everything as simple and simple as possible, I will discuss other methods later.

All help is appreciated. Thanks

Answer 1

1) Base64

, image/png png- image/jpeg jpg one:

echo '<img src="data:image/png;base64,'.base64_encode($blob).'"/>';

:

<div style="background-color:black; text-align:center; padding: 5px;">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAwBAMAAACh2TSJAAAALVBMVEUAAADtNTX////3n5/+9fX719f7zMz5tLTzfHzuQED//f31jY3ybGzxXV3wVFRaxp+rAAAAAXRSTlMAQObYZgAAALVJREFUOMut0rENAjEQRNHdC4kY0QBaAQUQX0QAFSAKIKQEKiAA6VqgIkriApuV1x7pQPz0aWwHljLMpZ0CRDBGoXmeghGYKFJsUo90giAImCgV5OJF+oOgKE48MlGgs2VLBIunWesw0a1ZHqF82c7GmmIfUSpgotOly29DFPFJFDEhkgIT/V5mZuvj6XofKrHU6vyI4u37IYi36aN4h5tL7PJyif1dvCgEpapzISbCTEj5R78BZq5A5Ldh2XYAAAAASUVORK5CYII">
</div>

Hide result

---

2)

, base64

Base64 , ( ), . , , (, ).

php :

64: echo '<img src="image.php?id='.$id.'"/>'; , .

image.php, :

// << include the $pdo here
$query = $pdo->prepare("SELECT `content` FROM `adsubm` WHERE `id` = :id" );
$query->execute(array(':id'=>$_GET['id']));
$data = $query->fetch();

if(empty($data)))
    header("HTTP/1.0 404 Not Found");
else {
    header('Content-type: image/jpeg');
    echo $data['content'];
}