如何从服务器动态加载图像并显示它们 - How to load images dynamically from server and display them

我的服务器上存储了图像，即我的服务器中有一个目录，例如：$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标签可以动态增加，有人能帮我吗？

您可以尝试获取图像文件。在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>

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

$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>

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>'
}