How to add an image to an array, bypass it and render?

Question

React

I add pictures locally from the computer.
I know that you can import pictures and then insert them into src, but if there are hundreds of such pictures, then manually is not an option.

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

Answer 1

You will not directly show a file that is located locally on the page, you need to
1) Make a form for uploading several files, google for the multiple attribute for input
2) Convert the file to base 64
https://developer.mozilla.org/en-US/docs/ Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/F...
3) Add urls to the base 64 array and show them to the user.
4) If the files need to be sent to the server - send.