javascript - 使用 PHP 从完整图像路径获取图像名称

Question

我正在尝试显示带有标题和缩略图的图像。我能够显示图片，但我发现很难将图像文件名显示为标题。

下面是我的代码:

<?php
$files = glob("images/Friends/*.*");
for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i]; 
    echo '<div class="w3-content" style="max-width:800px;position:relative;padding-top:0px;">';
    echo '<div class="w3-display-container mySlides">';
    echo '<div class="col s12 m6 l12">';
    echo '<div class="page4">';
    echo '<img src="'.$num.'" height="750" width="780" alt="random image" class="responsive-img" >'."&nbsp;&nbsp;";    
    echo '</div>';
    echo '</div>';
    echo '<a class="w3-btn-floating w3-hover-dark-grey"    style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>';
    echo '<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>';
    echo '</div>';
    echo ' </div>';
}
?>  

<script>
    var slideIndex = 1;
    showDivs(slideIndex);
    function plusDivs(n) {
        showDivs(slideIndex += n);
    }
    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1}
        if (n < 1) {slideIndex = x.length}
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex-1].style.display = "block";
    }
</script>

Answer 1

显示标题设置标题属性。并在tile属性中设置图片名称。

要从图像的完整路径获取图像名称，请使用 basename($num)

请用下面的代码替换您的 php 代码。

echo '<img src="'.$num.'" height="750" width="780" alt="'.basename($num).'" title="'.basename($num).'" class="responsive-img" >'."&nbsp;&nbsp;"; 

为循环代码下方的每个图像位置获取不带扩展名的文件名。并将 $filename 变量放在要显示图像名称的位置。

$filenamewithextension = basename($num);
$fileextenstion = pathinfo($filenamewithextension, PATHINFO_EXTENSION);
$filename = basename($num,$fileextenstion);
$filename = trim(preg_replace('/[0-9]+/', '', $filename));