title: How to mock Next.js Image component in Storybook?
body: <p>Next.js introduced a new <code>Image</code> component in v10 that's supposed to be a drop in replacement for the <code>&lt;img&gt;</code> tag.</p>
  <p>I'm having an error when trying to view components that import <code>next/image</code> into Storybook:</p>
  <p><code>TypeError: imageData is undefined</code></p>
  <p>I have been trying to override the image object in <code>preview.js</code> (a technique I use for <code>next/router</code>, as documented <a href="https://dev.to/openpatch/develop-components-for-your-next-js-site-in-isolation-with-storybook-22fh" rel="nofollow noreferrer">here</a>) but I get the same error:</p>
  <pre class="lang-js prettyprint-override"><code>// .storybook/preview.js
  
  import Image from 'next/image';
  
  Image = ({ src }) =&gt; &lt;img src={src} /&gt;;
  </code></pre>
  <p>Any idea how I could override the behaviour of the <code>next/image</code> package in Storybook?</p>