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

Question

[AndreyVolkov72]

Картинки добавляю локально с компьютера
Знаю что можно сделать импорт картинки и потом вставить в src, но если таких картинок будет сотня, то вручную не вариант.

const postsList = [
        {
            text: 'Here are some things you should know regarding how we work',
            url: '../../img/1.png'
        },
]

{postsList.map(post=>{
     return <Post key={post.url} url={post.url} text={post.text}/>
})}

export default function Post(props) {
    return (
        <div className={s.post}>
            <img className={s.img} src={props.url} alt="" />
            <p className={s.text}>{props.text}</p>
        </div>
    )
}

Comments

[Владимир]

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

[AndreyVolkov72]

Владимир, локально с компьютера

Answer 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) Если файлы нужно отсылать на сервер - отослать.