display images from db - php

Question

i have a table
tbl_image
--------------
imgID(int)
imgName(varchar)
image(blob)
here is code to display image :
<?php
$query = "SELECT * FROM tbl_image ORDER BY imgID DESC";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)){
$imgName = $row['imgName'];
echo '<div class="col-sm-3 gallery-grids-left">
<div class="gallery-grid">
<a class="example-image-link" href="data:image/jpeg;base64,'.base64_encode($row['image'] ).'"
data-lightbox="example-set"
data-title='.$imgName.'>
<img src="data:image/jpeg;base64,'.base64_encode($row['image'] ).'"/></a></div></div>';
}
?>
but I'm really not like to use echo ''; so I changed to
<?php
$query = "SELECT * FROM tbl_image ORDER BY imgID DESC";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)){
$imgName = $row['imgName'];
?>
<div class="col-sm-3 gallery-grids-left">
<div class="gallery-grid">
<a class="example-image-link" data-lightbox="example-set"
href="<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image'] ).'"; '?>"
data-title="<?php echo imgName;?>">
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image'] ).'"; '?>
</a>
</div>
</div>
<?php }
?>
It just display only image , no title no "image block" like this image demo
Plz help me to show my mistake?and how to fix it.
Many thanks,

Answer 1

HTML error in your code: wrong binding of PHP scripting
<?php
$query = "SELECT * FROM tbl_image ORDER BY imgID DESC";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)){
$imgName = $row['imgName'];
?>
<div class="col-sm-3 gallery-grids-left">
<div class="gallery-grid">
<a class="example-image-link" data-lightbox="example-set"
href="data:image/jpeg;base64,<?php echo base64_encode($row['image'] )?>"
data-title="<?php echo $imgName;?>">
<img src="data:image/jpeg;base64,<?php echo base64_encode($row['image']) ?> />
</a>
</div>
</div>
<?php }
?>

Answer 2

You have missed $ for variable imgName
Try below code:
<?php
$query = "SELECT * FROM tbl_image ORDER BY imgID DESC";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)){
$imgName = $row['imgName'];
?>
<div class="col-sm-3 gallery-grids-left">
<div class="gallery-grid">
<a class="example-image-link" data-lightbox="example-set"
href="<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image'] ).'"; '?>"
data-title="<?php echo $imgName;?>">
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image'] ).'"; '?>
</a>
</div>
</div>
<?php }
?>

Answer 3

First of all, as #Suyog pointed out, you missed $ on imgName variable in data-title. Second, if you are simplifying the code to use html as much as possible - do that and remove the extra stuff. Have something like this:
<?php
$query = "SELECT * FROM tbl_image ORDER BY imgID DESC";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)){
$imgName = $row['imgName'];
?>
<div class="col-sm-3 gallery-grids-left">
<div class="gallery-grid">
<a class="example-image-link" data-lightbox="example-set"
href='<img src="data:image/jpeg;base64,<?php echo base64_encode($row['image'] );?>"/>'
data-title="<?php echo $imgName;?>">
<img src="data:image/jpeg;base64,<?php echo base64_encode($row['image'] ); ?>">
</a>
</div>
</div>
<?php } ?>
Other than that, I would strongly advise against storing binary data in the database. This is not what the database is for. Store images are files and store filenames in the database. It'll make your life easier.