Как добавить картинку в массив, обойти её и отрендерить?

Дайте чуть больше вводных. Картинки откуда добавляются, локально с компьютера, из базы ссылки на картинки, ссылки на картинки через форму ввода?

AndreyVolkov72 @AndreyVolkov72 Автор вопроса
Владимир, локально с компьютера
Решения вопроса 0
Ответы на вопрос 1

Файл который расположен локально вы напрямую не покажете на странице вам нужно
1) Сделать форму для аплоаде нескольких файлов, гуглите по атрибуту multiple для инпута
2) Преобразовать файл в base 64
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/F.
3) Добавить в массив base 64 урлки и показать их пользователю.
4) Если файлы нужно отсылать на сервер — отослать.

Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• React
• +1 ещё

Как правильно реализовать проверку на наличие новых сообщений?

• 1 подписчик
• 23 часа назад
• 67 просмотров

Курсы javascript

Возможно ли такое, можно же создать массив из чисел и из строк.
Как можно создать массив из картинок?

09.09.2011, 23:30

Регистрация: 30.08.2011

Сообщений: 61

Также, как из чисел и строк:

var array = new Array(); var image = new Image(); image.src = "example.jpg"; // картинка закэширована, но ещё не в dom'е array.push(image);

var array = document.getElementsByTagName('img'); // выбрать вообще все картинки (теги img) на странице

Последний раз редактировалось crayday, 09.09.2011 в 23:38 . Причина: написал вначале не кроссбраузерный пример

Как добавить фото из массива в div?

Мне нужно динамически создать 10 дивов и в них вставить изображение/изображения из массива.

Делал следующим образом, но изображение добавляется только в последний ДИВ:

• Вопрос задан более трёх лет назад
• 2364 просмотра

3 комментария

Простой 3 комментария

Как создать массив с картинками и текстом и загружать их по нажатию на кнопки или на стрелки

Есть небольшой слайдер с четырьмя картинками и текстами в двух блоках: Как сделать массив с текстами и картинками, и изменять его, по нажатию на определенный день или же на стрелочки?

.slider < display: flex; margin-bottom: 300px; align-content: space-between; >.check-up-img < width: 100%; >.slider-info < display: flex; flex-direction: column; >.block-day < margin-top: 67px; align-items: center; display: flex; justify-content: flex-end; >.Day < text-align: center; padding: 6px 40px; >.selected < font-style: normal; font-weight: bold; font-size: 16px; line-height: 24px; text-transform: uppercase; color: #ff9933; >.day1 < border: 2px solid #ff9933; >.slider-text < float: right; >.slider-description < width: 480px; >.arrow < color: black; margin-top: 175px; >.arrow-left

        
 
 
 
 
 
 
 
 
 
День 
1
 
День 
2
 
День 
3
 
День 
4
 
 
День 1
 
Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере
 
    
 
 
 
 
 
 
 
    

Отслеживать

33.7k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

задан 8 авг 2021 в 10:31

Андрій Олегович Попович Андрій Олегович Попович

11 3 3 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Пример с использованием bootstrap

.custom-carousel < position: realtive; >.custom-carousel .carousel-item img < height: 100vh; object-fit: cover; >.custom-carousel .carousel-content < padding: 6em 0 2em; >.custom-carousel .carousel-indicators < top: 0; right: 0; left: auto; bottom: auto; width: 50%; margin-left: 0; margin-right: 0; justify-content: flex-start; padding: 2em 0; >.custom-carousel .carousel-indicators [data-bs-target] < background: none; text-indent: 0; white-space: nowrap; width: auto; height: auto; border: 2px solid transparent; padding: .5rem; >.custom-carousel .carousel-indicators .active

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">  
 
 
День 1 День 2 День 3 День 4 
 
 
 
 
 
 
 
День 1
 
Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере
 
 
 
 
 
 
 
 
 
 
День 2
 
Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере
 
 
 
 
 
 
 
 
 
 
День 3
 
Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере
 
 
 
 
 
 
 
 
 
 
День 4
 
Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере
 
 
 
 
 
 Previous  Next