从数据库 MySql 将图像加载到引导轮播

Question

我有一个有效的 Bootstrap 轮播，图像源插入 HTML 代码。我需要使用 PHP 代码从 Mysql 数据库加载图像（以及其他一些数据，如标题和描述）。我单独尝试了 PHP 代码，它可以工作，但是当我尝试将其实现为原始 HTML 代码时，它不起作用。

这是轮播 HTML 代码：

    <div id="myCarousel" class="carousel slide carousel-fade">


    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="3" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="4" class="" contenteditable="false"></li>

    </ol>



    <div class="carousel-inner">


        <div class="item" style="">
            <img src="images/slide/slide-1.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">First Slide Title</h4>
                <p class="">
                   Description for First Slide, this First Slide.
                </p>
            </div>
        </div>


        <div class="item active">
            <img src="images/slide/slide-2.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Second Slide Title</h4>

                <p class="">
                   Description for Second Slide, this is Second Slide.
                </p>
            </div>
        </div>


        <div class="item" style="">
            <img src="images/slide/slide-3.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>


         <div class="item" style="">
            <img src="images/slide/slide-4.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>


         <div class="item" style="">
            <img src="images/slide/slide-5.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>


    </div> 


    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>


</div>

这是我的 PHP 代码（单独）：

    <?php


$servername = "xxxxxxxxxxx";
$username = "xxxxxxxxxxxxx";
$password = "xxxxxxxxxxxxxx";
$dbname = "xxxxxxxxxxx";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT id AS id, title AS title, imagename AS imagename, description AS description, status AS status FROM uploadslide ORDER BY id";

 $result = mysqli_query($conn, $sql);

 while($row = mysqli_fetch_assoc($result)){



?>

        <div class="item" style="">
            <div class="carousel-caption">
            <?php echo '<img src="uploads/slide/' .$row['imagename']. '" alt="" class="" /> '?>
                <h4 class=""><?php echo $row['title'] ?></h4>
                <p class="">
                   <?php echo $row['description'] ?>
                </p>
            </div>
        </div>

        <?php 

}
    mysqli_close($conn);

?>

这是我的 HTML + PHP 代码（一起）：

    <div id="myCarousel" class="carousel slide carousel-fade">


    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="3" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="4" class="" contenteditable="false"></li>

    </ol>



    <div class="carousel-inner">


       <?php


$servername = "xxxxxxxxxxxx";
$username = "xxxxxxxxxxx";
$password = "xxxxxxxxxxxx";
$dbname = "xxxxxxxxxxx";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT id AS id, title AS title, imagename AS imagename, description AS description, status AS status FROM uploadslide ORDER BY id";

 $result = mysqli_query($conn, $sql);

 while($row = mysqli_fetch_assoc($result)){



?>

        <div class="item" style="">
            <div class="carousel-caption">
            <?php echo '<img src="uploads/slide/' .$row['imagename']. '" alt="" class="" /> '?>
                <h4 class=""><?php echo $row['title'] ?></h4>
                <p class="">
                   <?php echo $row['description'] ?>
                </p>
            </div>
        </div>

        <?php 

}
    mysqli_close($conn);

?>


    </div> 

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>


</div>

我的页面没有轮播。我快疯了。

Answer 1

首先在您的数据库表中为被调用项目添加一个字段。 现在，对于您要在该字段中首先显示的特定图像，将其设置为活动状态，然后将您的轮播设置为

 <div class="item" <?php echo $row['item']; ?>>
        <div class="carousel-caption">

这应该让它显示