title: Import Multiple images and export array
body: <p>Sorry if it seems a bit confusing, I'll try to be as simple and put as much demonstration as possible.</p>
  <p><strong>The problem</strong></p>
  <p>I have a file that needs to import a bunch of images (for now 65 images). In order not to be a manual process, even when adding a new image in the folder and already being 'automatically detected' I created a function to import everything. However, I need to 'export' this function into an object like this:</p>
  <pre><code>const brandsAdds = [
    {
      label: &quot;brand1&quot;,
      value: &quot;brand1&quot;,
      logo: Object,
    },
    {
      label: &quot;brand2&quot;,
      value: &quot;brand2&quot;,
      logo: Object,
    },
    ...
  ];
  </code></pre>
  <p>How am I importing all the images:</p>
  <pre><code>  // Import all images in folder
    function importAll(r) {
      let images = {};
      r.keys().map((item, index) =&gt; {
        images[item.replace(&quot;./&quot;, &quot;&quot;).slice(0, -4)] = r(item).default;
      });
      return images;
    }
  
    // Variable for easy access to data
    const image = importAll(
      require.context(&quot;../&quot;, false, /\.(png|jpe?g|svg|gif)$/)
    );
  </code></pre>
  <p><strong>Demo</strong></p>
  <blockquote>
  <p>Automated process:
  <a href="https://codesandbox.io/s/frosty-sun-n75j5?file=/pages/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/frosty-sun-n75j5?file=/pages/index.js</a></p>
  <p>Result:
  <a href="https://i.stack.imgur.com/bRx9R.png" rel="nofollow noreferrer">Print result: what must be converted and how</a></p>
  </blockquote>
  <blockquote>
  <p>Manual process:
  <a href="https://codesandbox.io/s/frosty-sun-n75j5?file=/pages/index_manual.js" rel="nofollow noreferrer">https://codesandbox.io/s/frosty-sun-n75j5?file=/pages/index_manual.js</a></p>
  <p>Result:
  <a href="https://i.stack.imgur.com/3j4Sa.png" rel="nofollow noreferrer">Print result manual process</a></p>
  </blockquote>
  <p>I'm using next.js and this file that will export an array object will be used in another component. The file is currently over 300 lines long as I'm calling it image by image.</p>
  <p>Would there be any way to import all the images by adding them to the array with &quot;label:&quot; and &quot;value:&quot; with the filename and &quot;logo:&quot; with the image path (next.js)?</p>