如何从服务器动态加载图像并显示它们

Question

我的服务器上存储了图像，即我的服务器上有一个目录，例如： $uploadsDirectory = $_SERVER['DOCUMENT_ROOT'] 。 $directory_self 。 'uploaded_files/';

我需要从目录中加载每个图像并显示在以下 html 中：

<div class="image-set">
                <a class="example-image-link" href="images/demopage/1.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="images/demopage/1.jpg" alt=""/></a>
                <a class="example-image-link" href="images/demopage/2.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="images/demopage/2.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/3.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="images/demopage/3.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/4.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/4.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/5.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="images/demopage/5.jpg" alt=""/></a>
                <a class="example-image-link" href="images/demopage/6.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="images/demopage/6.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/7.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="images/demopage/7.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/8.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/8.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/9.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="images/demopage/9.jpg" alt=""/></a>
                <a class="example-image-link" href="images/demopage/10.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="images/demopage/10.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/11.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="images/demopage/11.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/12.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/12.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/13.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/13.jpg" alt="" /></a>
            </div>

img标签可以动态增加，有谁能帮帮我吗？

Answer 1

您可以尝试获取图像文件。在php中使用glob函数，

<div class="image-set">    
    <?php foreach (glob('images/demopage/*') as $filename) { ?>
        <img class="example-image" src="images/demopage/<?php echo basename($filename); ?>" alt=""/>
    <?php } ?>
</div>

Answer 2

首先，您需要扫描目录中所有想要的图像文件：

$imageFiles = [];
$uploadsDirectory = $_SERVER['DOCUMENT_ROOT'] . $directory_self . 'uploaded_files/';

// check folder exists
if (is_dir($uploadsDirectory))
{
    for (scandir($uploadsDirectory) as $file)
    {
        // include only desired file types
        $ext = pathinfo($file, PATHINFO_EXTENSION);
        if ($ext == 'jpg' || $ext == 'png' || $ext == 'gif')
        {
            $imageFiles[] = $file;
        }
    }
}

现在，如果您设置了 URL 重写，将 url 'images/demopage/' 链接到存储图像的目录（您可以将其限制为仅接受图像请求），您可以在您的 HTML 模板：

<div class="image-set">
    <?php
        foreach ($imageFiles as $image)
        {
            echo '<a class="example-image-link" href="images/demopage/' . $image . '" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close.">';
            echo '<img class="example-image" src="images/demopage/' . $image . '" alt="" />';
            echo '</a>';
        }
    ?>
</div>

Answer 3

http://www.php.net/manual/en/function.scandir.php

类似的东西？

function getImageUrls($uploadsDirectory)
{
    $urls = array();
    foreach(scandir($uploadsDirectory) as $filename) {
        if($filename != '.' AND $filename != '..') {
            $pathinfo = pathinfo($filename);
            if(in_array($pathinfo['extension'], array('jpg', 'png', 'gif'))) {
                $urls[] = $uploadsDirectory.$filename;
        }
    }
    return $urls;
}

// ----------------------------------


foreach(getImageUrls($uploadsDirectory) as $src) {
    echo '<a class="example-image-link" href="'.$src.'" data-lightbox="example-set"><img class="example-image" src="'.$src.'" alt=""/></a>'
}