使用 php 将图像名称放在文件夹中，以在引导轮播中提供 HTML img src

Question

我有一个文件夹，其中包含我想放入 Bootstrap 轮播中的图像。我没有在我的 HTML 中对所有内容进行硬编码，而是使用 PHP 来扫描图像文件并动态创建我的轮播列表。

经过各种尝试，我最大的成就是在轮播中列出了我的图片名称（而不是图片本身）。

我的代码如下。我有两个问题：

1. （显然）为什么它不起作用？

2. 有没有更好的方法将如此长的 PHP 函数从 HTML 代码中分离出来（例如使用 include 的调用，但它适用于函数）？

   <div class="container-fluid">
     <?php
       $img_folder = './img/img_animazione/';
       function carousel_loop($folder)
       {
         echo '<div id="myCarousel" class="carousel slide" data-ride="carousel">';
         echo '<ol class="carousel-indicators">';
         $i = -1;
         $images = scandir($folder);
         foreach($images as $image) {
           $i++; //$i is the index of the current loop.
           if ($i == 0) {
             echo '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="active"></li>';
           } else {
             echo '<li data-target="#myCarousel" data-slide-to="' . $i . '"</li>';
           }
         }
         echo '</ol>';
         echo '<div class="carousel-inner">';
         foreach($images as $image) {
           if ($image === reset($images)) {
             echo '<div class="item active">';
             echo '<img src="' . $image . '" alt="'. $image . '">';
             echo '</div>';
           } else {
             echo '<div class="item">';
             echo '<img src="' . $image . '" alt="'. $image . '">';
             echo '</div>';
           }
         }
         echo '</div>'; 
         echo '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
         echo '<span class="glyphicon glyphicon-chevron-left"></span>';
         echo '<span class="sr-only">Previous</span>';
         echo '</a>';
         echo '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
         echo '<span class="glyphicon glyphicon-chevron-right"></span>';
         echo '<span class="sr-only">Next</span>';
         echo '</a>';
         echo '</div>';
       }
       carousel_loop($img_folder);
     ?>
   </div>
   

Answer 1

这不是使用函数的方式。你不能在函数内部这样回显。您必须在函数内部构建 HTML 并将其返回。然后要么只是回显函数，要么将它返回的内容分配给变量。

像这样：

<?php
   function carousel_loop($folder)
   {
   html = "";
   html .= '<div id="myCarousel" class="carousel slide" data-ride="carousel">';
   html .= '<ol class="carousel-indicators">';
   $i = -1;
   $images = scandir($folder);
   foreach($images as $image) {
      $i++; //$i is the index of the current loop.
      if ($i == 0) {
        html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="active"></li>';
      } else {
         html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '"</li>';
      }
    }
    html .= '</ol>';
    html .= '<div class="carousel-inner">';
    foreach($images as $image) {
      if ($image === reset($images)) {
        html .= '<div class="item active">';
        html .= '<img src="' . $image . '" alt="'. $image . '">';
        html .= '</div>';
      } else {
        html .= '<div class="item">';
        html .= '<img src="' . $image . '" alt="'. $image . '">';
        html .= '</div>';
      }
    }
    html .= '</div>'; 
    html .= '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
    html .= '<span class="glyphicon glyphicon-chevron-left"></span>';
    html .= '<span class="sr-only">Previous</span>';
    html .= '</a>';
    html .= '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
    html .= '<span class="glyphicon glyphicon-chevron-right"></span>';
    html .= '<span class="sr-only">Next</span>';
    html .= '</a>';
    html .= '</div>';

    return html;
}
?>
<div class="container-fluid">
<?php
$img_folder = './img/img_animazione/';
echo carousel_loop($img_folder);
?>
</div>

Answer 2

感谢@Abraham A. 的回答，我终于能够想出一个可行的（仍然是“污垢”）解决方案。我将在下面发布代码。我最初的代码中的问题是：

1. 在函数中使用echo，而不是在函数中返回（非常长的）HTML 字符串，并从外部返回“echoing”。
2. <img src= 显然想要一个源，而不仅仅是一个文件名。我的第一次尝试是<img src= . $image，正确的形式是<img src= . $folder . DIRECTORY_SEPARATOR . $image
3. 似乎[scandir()][1] 创建了一个数组，其中包含文件夹中的所有文件名和".", ".."（当前和父文件夹）。我按照here 的建议通过$allFiles = scandir($folder); $images = array_diff($allFiles, array('.', '..')); 摆脱了后者。

我现在的工作代码是这个。

<?php
   function carousel_loop($folder)
   {
     $html = "";
     $html .= '<div id="myCarousel" class="carousel slide" data-ride="carousel">';
     $html .= '<ol class="carousel-indicators">';
     $i = -1;
     $allFiles = scandir($folder); // list all files in folders
     $images = array_diff($allFiles, array('.', '..')); // drop current and parent folder from array list (".", "..")
     foreach($images as $image) {
       $i++; //$i is the index of the current loop.
       if ($i == 0) {
         $html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="active"></li>';
       } else {
         $html .= '<li data-target="#myCarousel" data-slide-to="' . $i . '"></li>';
       }
     }
     $html .= '</ol>';
     $html .= '<div class="carousel-inner">';
     foreach($images as $image) {
       if ($image === reset($images)) {
         $html .= '<div class="item active">';
         $html .= '<img src="' . $folder . DIRECTORY_SEPARATOR . $image . '" alt="' . $image . '" style="width:100%;">';
         $html .= '</div>';
       } else {
         $html .= '<div class="item">';
         $html .= '<img src="' . $folder . DIRECTORY_SEPARATOR . $image . '" alt="' . $image . '" style="width:100%;">';
         $html .= '</div>';
       }
     }
     $html .= '</div>';
     $html .= '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
     $html .= '<span class="glyphicon glyphicon-chevron-left"></span>';
     $html .= '<span class="sr-only">Previous</span>';
     $html .= '</a>';
     $html .= '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
     $html .= '<span class="glyphicon glyphicon-chevron-right"></span>';
     $html .= '<span class="sr-only">Next</span>';
     $html .= '</a>';
     $html .= '</div>';

     return $html;
   }
?>

<div class="container">
  <?php
    $img_folder = './img/img_animazione';
    echo carousel_loop($img_folder);
  ?>
</div>