How to insert src dynamically from database in Boo

问题:

This question is an exact duplicate of:

• HTML table using MySQLi and PHP 2 answers

I have a Carousel in my page as below

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to=""></li>
    <li data-target="#carouselExampleIndicators" data-slide-to=""></li>
    <li data-target="#carouselExampleIndicators" data-slide-to=""></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="images/katakali.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="images/kappilParavur.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="images/temple.png" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

What I Need

I want to get the image names from database using the MySQL - php codes as below

<?php
$carouselImageSql = "SELECT * FROM indexPageElements WHERE carouseImage = '1'";
$carouselImageResult = mysqli_query($conn, $carouselImageSql);
$carouselImageRow = mysqli_fetch_array($carouselImageResult);
$imageLocation = $carouselImageRow['carouseImageLocation'];
?>

And then insert into my html as below

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
	<ol class="carousel-indicators">
	<?php
	while($carouselImageRow){
		echo '<li data-target="#carouselExampleIndicators" data-slide-to="" ></li>';
	?>
	</ol>
	<div class="carousel-inner" role="listbox">
	<?php
		echo '<div class="carousel-item active">
			  <img class="d-block img-fluid" src="'.$imageLocation.'"alt="First slide">
			</div>';
	}
	?>
	</div>
	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

My Problem

The issue is with the active class in the carousel. when I loop through using while($carouselImageRow) it is always adding active class and thus carousel not working correctly. How should I add active class only to the first set of data while looping and then don't add that active class anymore after the first set?

Edit 1

I rewrite the whole thing as below. But still not showing anything

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
	<ol class="carousel-indicators">
	<?php
	$carouselImageSql = "SELECT * FROM indexPageElements WHERE carouseImage = '1'";
	$carouselImageResult = mysqli_query($conn, $carouselImageSql);
		
	
		
	while($carouselImageRow = mysqli_fetch_array($carouselImageResult)){
		$imageLocation = $carouselImageRow['carouseImageLocation'];
		$i = 0;
		echo '<li data-target="#carouselExampleIndicators" data-slide-to="" ></li>';
	?>
	</ol>
	<div class="carousel-inner" role="listbox">
	<?php
		if($i == 0){
			echo '<div class="carousel-item active">
			  <img class="d-block img-fluid" src="images/'.$imageLocation.'" alt="First slide">
			</div>';
		}else{
			echo '<div class="carousel-item">
			  <img class="d-block img-fluid" src="images/'.$imageLocation.'" alt="First slide">
			</div>';
		}
		
		$i += 1;
	}
	?>
	</div>
	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Edit 2

After gave the counter outside the while loop, it works. Please see the codes below for the working model

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
	<ol class="carousel-indicators">
	<?php
	$carouselImageSql = "SELECT * FROM indexPageElements WHERE carouseImage = '1'";
	$carouselImageResult = mysqli_query($conn, $carouselImageSql);
//	$carouselImageRow = mysqli_fetch_array($carouselImageResult);
		
	
			
	$i = 0;
	while($carouselImageRow = mysqli_fetch_array($carouselImageResult)){
		$imageLocation = $carouselImageRow['carouseImageLocation'];
		
		echo '<li data-target="#carouselExampleIndicators" data-slide-to="" ></li>';
	?>
	</ol>
	<div class="carousel-inner" role="listbox">
	<?php
		if($i == 0){
			echo '<div class="carousel-item active">
			  <img class="d-block img-fluid" src="images/'.$imageLocation.'" alt="First slide">
			</div>';
		}else{
			echo '<div class="carousel-item">
			  <img class="d-block img-fluid" src="images/'.$imageLocation.'" alt="First slide">
			</div>';
		}
		
		$i += 1;
	}
	?>
	</div>
	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

回答1:

You could possibly use a counter in the while statement I notice that you have unclosed items in the loop for the carousel indicators, so you will need to do a separate loop for that also. Also you opened the carousel-inner div inside the loop, so you would get many div's open but not closed within the loop. Hope that helps. See the counter in the carousel item loop below.

<div class="carousel-inner" role="listbox">
<?php
$count  = 0;
while($carouselImageRow){
    echo '<div class="carousel-item active">
          <img class="d-block img-fluid" src="'.$imageLocation.'"alt="First slide">
        </div>';
}
?>
</div>