显示存储在public_html之外的图像数组

Question

I want to display array of images as thumbnails in bootstrap, the images are stored outside the public directory or root. This is the code I used to display images before storing them outside the public directory.

<?php 
 foreach ($artist as $value) : ?>
 <div class="col-xm-6 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<a href="info.php?id=<?php echo $value['uploads_id']; ?>"><img src="<?php echo trim($value['uploads_cover']); ?>"></a>
<div class="caption">
    <p><?php echo substr($value['title'], 0,29); ?></p>
    <hr>
    <p><?php echo substr($value['name'], 0,29); ?></p>
  </div>
  </div>
 </div>
 <?php endforeach;

Now I have decided to store images outside the web root, I can't display them with foreach, Currently I can display one image with the following code.

image.php

<?php
 header('Content-type: image/jpeg');
 readfile('/opt/lampp/htdocs/images/Uploads/00-cover.jpg.png');

then in my src

<img src="image.php" alt="..." >

UPDATE Using suggested answer by Amarnasan

 <?php foreach ($images as $value) : ?>
 <li>
<a href="image.php?folder=<?php echo $artist[0]['upload_folder'].'&img='.$value;?>">
            <img src="image.php?folder=<?php echo $artist[0]['upload_folder'].'&img=th_'.$value;?>" alt="<?php echo $artist[0]['title'];?>"  />
      </a>
    </li>
 <?php endforeach; ?>

And my new image.php It's working after removing extensions. . '.jpg.png'

<?php
  header('Content-type: image/jpeg');
  readfile('/opt/lampp/htdocs/images/'. $_GET['folder'] . '/' . $_GET['img']);

Images are still not displaying, when I open dev console, image src displays src="image.php?folder=armin&img=th_21570.jpg"

Answer 1

Pass the image name as parameter to image.php:

<img src="image.php?img=00-cover" alt="..." >
<img src="image.php?img=01-cover" alt="..." >

and

<?php
 header('Content-type: image/jpeg');
 readfile('/opt/lampp/htdocs/images/Uploads/'.$_GET['img'].'.jpg.png');