Как динамически загружать изображения с сервера и отображать их

121
12

У меня есть изображения, хранящиеся на моем сервере, т.е. у меня есть каталог на моем сервере, такой как: $ 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 могут быть динамически увеличены, может ли кто-нибудь помочь мне в этом?

спросил(а) 2021-01-19T19:21:33+03:00 9 месяцев назад
1
Решение
65

Вы можете попробовать получить файлы изображений. Используйте функцию glob в php,

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

ответил(а) 2021-01-19T19:21:33+03:00 9 месяцев назад
46

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

ответил(а) 2021-01-19T19:21:33+03:00 9 месяцев назад
46

Во-первых, вам нужно отсканировать каталог для всех файлов изображений, которые вы хотите:

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

ответил(а) 2021-01-19T19:21:33+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема