title: Nextjs / Typescript - Mapping through images throws error 'missing required src property'
body: <p><strong>Problem:</strong>
  When I map through an array of objects, e.g. the string entries are displayed correctly. The images in the Image Component are not loaded dynamically in the src.</p>
  <p>The images are imported in the constants.js file and exported via the 'trustedClients' (array of objects).</p>
  <p><strong>Error:</strong></p>
  <pre><code>Image is missing required &quot;src&quot; property
  </code></pre>
  <p><strong>Expected result:</strong> Mapping through all objects of the trustedClients Array and return all values. Set the image as dynamic src for the Image component.</p>
  <p><strong>Files:</strong></p>
  <pre><code>// constants.js file 
  // with image import and array export
  import {
      example1Image,
      example2Image,
      example3Image,
  } from '../assets';
  
  export const trustedClients = [
      {
          index: 'example1',
          name: 'Example One',
          image: example1Image,
      },
      {
          index: 'example2',
          name: 'Example Two',
          image: example2Image,
      },
      {
          index: 'example3',
          name: 'Example Three',
          image: example3Image,
      },
  ];
  </code></pre>
  <pre><code>// component file with mapping
  // code is a simpliefied version without the styling
  import Image from 'next/image';
  import { trustedClients } from '../constants';
  
  const Trusted = () =&gt; (
          &lt;div&gt;
              {trustedClients.map((client) =&gt; {
                  return (
                      &lt;div key={client.index}&gt;
                          &lt;div&gt;
                              &lt;Image
                                  src={client.image}
                                  alt='client'
                                  width='48px'
                                  height='48px'
                              /&gt;
                          &lt;/div&gt;
                          &lt;p&gt;{client.name}&lt;/p&gt;
                      &lt;/div&gt;
                  );
              })}
          &lt;/div&gt;
  );
  
  export default Trusted;
  </code></pre>
  <p><strong>Question:</strong>
  What is the correct use case to get the mapping through the images working and set it as the src of the Image component.</p>
  <p>Any help appreciated!</p>