title: Next.js Image component error src missing though I am providing the src prop
body: <p>I am providing the src prop to the UserCard but then also I am getting the error below.</p>
  <p><strong>Error</strong></p>
  <pre><code>Unhandled Runtime Error
  Error: Image is missing required &quot;src&quot; property. Make sure you pass &quot;src&quot; in props to the `next/image` component. Received: {&quot;width&quot;:50,&quot;height&quot;:50}
  </code></pre>
  <p>The Code in different Files is below</p>
  <p><strong>In UserCard.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>
  import Avatar from './Avatar';
  import Link from 'next/link';
  
  export default function UserCard({ user, border, onClick }) {
      function handleCloseAll() {
          if (onClick) onClick();
      }
      return (
          &lt;div
              className={`d-flex p-2 align-items-center justify-content-between w-100 ${border}`}&gt;
              &lt;div onClick={handleCloseAll}&gt;
                  &lt;Link href={`/profile/${user._id}`}&gt;
                      &lt;a className='d-flex align-items-center text-decoration-none'&gt;
                          &lt;Avatar.Big src={user.avatar} /&gt;
                          &lt;div className='ml-1' style={{ transform: 'translateY(-2px)' }}&gt;
                              &lt;span className='d-block'&gt;{user.username}&lt;/span&gt;
                              &lt;span
                                  style={{
                                      opacity: 0.7
                                  }}&gt;
                                  {user.fullname}
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/Link&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  </code></pre>
  <p><strong>in Avatar/Big.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Image from 'next/image';
  import { useSelector } from 'react-redux';
  import styles from '../../../styles/avatar.module.css';
  export default function Big({ src }) {
      const { darkMode } = useSelector(state =&gt; state);
      return (
          &lt;div
              style={{
                  filter: darkMode ? 'invert(1) hue-rotate(180deg)' : 'invert(0)'
              }}&gt;
              &lt;Image
                  className={styles.avatar}
                  width={50}
                  height={50}
                  src={src}
                  alt='Avatar'
              /&gt;
          &lt;/div&gt;
      );
  }
  
  </code></pre>
  <p><strong>in Avatar/index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Super from './Super';
  import Big from './Big';
  import Medium from './Medium';
  import Small from './Small';
  const Avatar = {
      Super: Super,
      Big: Big,
      Medium: Medium,
      Small: Small
  };
  
  export default Avatar;
  
  </code></pre>
  <p><strong>Effort</strong></p>
  <p>If I am using the native <code>&lt;img /&gt;</code> it is working as expected</p>
  <pre class="lang-js prettyprint-override"><code>
  import Avatar from './Avatar';
  import Link from 'next/link';
  
  export default function UserCard({ user, border, onClick }) {
      function handleCloseAll() {
          if (onClick) onClick();
      }
      return (
          &lt;div
              className={`d-flex p-2 align-items-center justify-content-between w-100 ${border}`}&gt;
              &lt;div onClick={handleCloseAll}&gt;
                  &lt;Link href={`/profile/${user._id}`}&gt;
                      &lt;a className='d-flex align-items-center text-decoration-none'&gt;
                          &lt;img src={user.avatar} /&gt;
                          &lt;div className='ml-1' style={{ transform: 'translateY(-2px)' }}&gt;
                              &lt;span className='d-block'&gt;{user.username}&lt;/span&gt;
                              &lt;span
                                  style={{
                                      opacity: 0.7
                                  }}&gt;
                                  {user.fullname}
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/Link&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  </code></pre>
  <p><strong>More Details</strong></p>
  <p>I am using Nextjs version 11.0.1</p>
  <p>Github Repository Link for further insights :- <a href="https://github.com/KUSHAD/dogeshot" rel="noreferrer">https://github.com/KUSHAD/dogeshot</a></p>