Как показать все изображения, хранящиеся в папке, используя JS? - PullRequest
Новая
       2

Как показать все изображения, хранящиеся в папке, используя JS?

1 голос
/ 23 апреля 2020

Я не очень знаком с JavaScript. Поэтому, пожалуйста, помогите мне, если есть простой способ. Я делаю веб-страницу локальной сети, которая покажет все фотографии, хранящиеся в папке. Но добавить все эти тысячи изображений одно за другим, используя теги div и img, очень сложно. Поэтому я подумал, есть ли способ автоматически добавлять изображения из папки в мой html. Я думаю, что для l oop, использующего одно и то же имя изображения с разными номерами индексов (я переименую изображения - например, img (1), img (2)) будет полезно, но я не не знаете как это сделать?

Вот мой html код (с использованием Materialise Framework) - 

<body>
<div class="fixed-navbar">   <--I have to write this every time I want to add image. So this is where I am wanting some automation-->
    <nav>
        <div class="nav-wrapper white">
            <a href="#" class="brand-logo black-text">LAN Page</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="videos.html" class="black-text">Videos</a></li>
                <li class="active blue lighten-3"><a href="#" class=" black-text">Home</a></li>
            </ul>
        </div>
    </nav>
</div>

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

Никакая серверная сторона не может требовать от вас JS знать, сколько существует файлов изображений. 

let max = 10; // Replace with Number of Images
let body = document.body;
for (let x = 0; x < max; x++) {
  body.innerHTML += ` // Template Literals. MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
   <div class="fixed-navbar">   
    <nav>
        <div class="nav-wrapper white">
            <a href="#" class="brand-logo black-text">LAN Page</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="videos.html" class="black-text">Videos</a></li>
                <li class="active blue lighten-3"><a href="#" class=" black-text">Home</a></li>
            </ul>
        </div>
    </nav>
</div> 
  `
}

Мне кажется странным, что вы просто хотите добавить элемент "LAN Page" и не само изображение. Если вам нужно изображение. Прокомментировать.

0 голосов
/ 23 апреля 2020

Вы можете использовать JavaScript для динамического добавления HTML на страницу HTML. Позвольте мне показать вам, как. 

import * as img from 'images/path_to_img.ext';
for (var i=0;i<img.length;i++)
{
document.querySelector("image-container").innerHTML+=('<img src='+img[i].src);
}
<div class="image-container">
</div>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...