title: How to iterate through public/assets/images so i can get all images filename in an array?
body: <p>I have images in public/assets/images. There's 100 images with different file extension (png, jpg, webp, etc). I'm trying to make a list of images and those images are taken from public/assets/images. How to iterate through public/assets/images so i can get all images filename in an array?. And here's how my code look like.</p>
  <pre><code>const ImageList = () =&gt; {
    const filenames = [an array consist of image filename in public/assets/images]
    return (
      &lt;ul&gt;
        {
          filenames.map(filename =&gt; {
            return &lt;li&gt;
              &lt;img src={filename} alt={filename} /&gt;
            &lt;/li&gt;
          })
        }
      &lt;/ul&gt;
    )
  }
  
  export default ImageList
  </code></pre>
  <p>Here's my project structure</p>
  <pre><code>public
  -assets
  --images
  --- image1.jpg
  --- image2.png
  --- image3.webp
  --- ...
  src
  -components
  --ImageList.js
  --...
  App.js
  </code></pre>