How do I fetch dynamically array of images based on id using explode function and prepared statement?

Question

Here, property_id is Integer and property_img is Varchar.

clicking on particular image(which is array of images),passing id through hyperlink ,it should show in form of carousel manner

<form method="POST" enctype="multipart/form-data">
 <?php 
 $sql="select property_id,property_img from img_tbl";

       $q=$conn->query($sql);
       if($q->num_rows>0)
       {
         while($r1=$q->fetch_assoc())
       {
            $property_img1=$r1['property_img'];
         $property_img=explode(' ',$property_img1);


        echo '

     <div id="shade">
     <div class="col-sm-12 " id="color">
     <div class="col-sm-4 form-group">    

     <div class="row fppadd"> 
     <span></i><a href="viewpro_img.php?propty_id='.$r1['property_id'].'">'; 
     ?>

     <img class="img-zoom" src="uploads/ <?php
        foreach($property_img as $data){
        echo '
        '.$data.'  '  ;
        }
        ?> "
        width="200" height="150"><br></a></span><br>
     </div>
                  </div>



  </div>

  </div> <?php
       }
       }?>       
       <br> 






  </form>

Please help.

---

Am getting this by view source But images not showing in Browser.

<form method="POST" enctype="multipart/form-data">


     <div id="shade">
     <div class="col-sm-12 " id="color">
     <div class="col-sm-4 form-group">    

     <div class="row fppadd"> 
     <span></i><a href="viewpro_img.php?propty_id=13">

this is the first array of image

     <img class="img-zoom" src="uploads/ 
        a.jpg  
        avatar.png  
        b.jpg   "
        width="200" height="150"><br></a></span><br>
     </div>
                  </div>



  </div>

  </div> 

     <div id="shade">
     <div class="col-sm-12 " id="color">
     <div class="col-sm-4 form-group">    

     <div class="row fppadd"> 
     <span></i><a href="viewpro_img.php?propty_id=14"> 

**this is the 2nd array of image **

     <img class="img-zoom" src="uploads/ 
        Chrysanthemum.jpg  
        Desert.jpg  
        img02.jpg  
        img03.jpg  
        img05.jpg  
        img06.jpg  
        img07.jpg  
        img09.jpg  
        img10.jpg  
        img11.jpg   "
        width="200" height="150"><br></a></span><br>
     </div>
                  </div>



  </div>

  </div>        
       <br> 






  </form>

Answer 1

Instead of

<img class="img-zoom" src="uploads/ <?php
    foreach($property_img as $data){
    echo '
    '.$data.'  '  ;
    }
    ?> "
    width="200" height="150"

Do this:

foreach ($property_img as $data)
{
    echo "<img class=\"img-zoom\" src=\"uploads/" . $data . "\" width=\"200\" height=\"150\" alt=\"something\">
}

Your resulting HTML will look like

<img class="img-zoom" src="uploads/IMG1.jpg" width="200" height="150" alt="something" >
<img class="img-zoom" src="uploads/IMG2.jpg" width="200" height="150" alt="something" >
<img class="img-zoom" src="uploads/IMG3.jpg" width="200" height="150" alt="something" >

...