is there another way to get the image from DB to Dynamic Carousel?

I have seen many people have posted the same question but non of their answers have worked. I have used bootstrap to create a Dynamic Carousel that gets the image from the path that stored in the database folder (uploadimages/news/) and I have used foreach to iterate over arrays. the issue is when I uploaded an image it won’t appear in the Dynamic Carousel.

    <?php include 'db.php'; ?>

    <?php
    $MSG ='';
    if(isset($_POST['upload'])){
        $image = $_FILES['image']['name'];
        
        $path = 'uploadimages/news/'.$image;


        $sql = $conn->query("INSERT INTO news (upcoming) 
        VALUES ('$path') ");

        if($sql){
            move_uploaded_file($_FILES['image']['tmp_name'], $path);
            $MSG = 'IMAGE uplodeed suscsassfly !';
        }
       
        else{
                $MSG =  'IMGE uploded felied';
            }

    }

        $result = $conn->query("SELECT  upcoming FROM news ");
       
        

    ?>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <h1 class="text-center bg-dark text-light pb-2"> top nv </h1> 

        <div class="container-fluid">
        
        <div class="row justify-content-center mb-2">
        <div class="col-lg-10">
        <div id="demo" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ul class="carousel-indicators">

        <?php
         $i = 0;
         foreach ($result as $row){
            $actives = '';
            if($i == 0){
               $actives = 'active'; 

            }
        ?>

        <li data-target="#demo" data-slide-to="<?= $i; ?>" class="<?= $actives; ?>"></li>
            <?php $i++; } ?>
      </ul>

      <!-- The slideshow -->
      <div class="carousel-inner">
      <?php
         $i = 0;
         foreach ($result as $row){

            $actives = '';
            if($i == 0){
               $actives = 'active'; 

            }
        ?>
        <div class="carousel-item <?= $actives; ?>">
          <img src="<?= $row ['upcoming'] ?>"  width="100%" height="400">
        </div>
        <?php $i++; } ?>
      </div>

      <!-- Left and right controls -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>

    </div>

        </div>

        </div>
        
       
    </body>
    </html>

JavaScript
​x
 
    <?php include 'db.php'; ?>​    <?php    $MSG ='';    if(isset($_POST['upload'])){        $image = $_FILES['image']['name'];                $path = 'uploadimages/news/'.$image;​​        $sql = $conn->query("INSERT INTO news (upcoming)         VALUES ('$path') ");​        if($sql){            move_uploaded_file($_FILES['image']['tmp_name'], $path);            $MSG = 'IMAGE uplodeed suscsassfly !';        }               else{                $MSG =  'IMGE uploded felied';            }​    }​        $result = $conn->query("SELECT  upcoming FROM news ");               ​    ?>​    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">    </head>    <body>        <h1 class="text-center bg-dark text-light pb-2"> top nv </h1> ​        <div class="container-fluid">                <div class="row justify-content-center mb-2">        <div class="col-lg-10">        <div id="demo" class="carousel slide" data-ride="carousel">​      <!-- Indicators -->      <ul class="carousel-indicators">​        <?php         $i = 0;         foreach ($result as $row){            $actives = '';            if($i == 0){               $actives = 'active'; ​            }        ?>​        <li data-target="#demo" data-slide-to="<?= $i; ?>" class="<?= $actives; ?>"></li>            <?php $i++; } ?>      </ul>​      <!-- The slideshow -->      <div class="carousel-inner">      <?php         $i = 0;         foreach ($result as $row){​            $actives = '';            if($i == 0){               $actives = 'active'; ​            }        ?>        <div class="carousel-item <?= $actives; ?>">          <img src="<?= $row ['upcoming'] ?>"  width="100%" height="400">        </div>        <?php $i++; } ?>      </div>​      <!-- Left and right controls -->      <a class="carousel-control-prev" href="#demo" data-slide="prev">        <span class="carousel-control-prev-icon"></span>      </a>      <a class="carousel-control-next" href="#demo" data-slide="next">        <span class="carousel-control-next-icon"></span>      </a>​    </div>​        </div>​        </div>                   </body>    </html>

Answer

Check your carousel with static images.

Also the images should be uploaded properly in the folder and their paths be inserted in the database. The way you address a tag is important link.

And its better to change the name of uploaded images.

Advertisement

Answer