title: Next.Js Image Component does not load image on localhost
body: <p>I have setup the image domain on <code>next.config.js</code> but the image does not show on localhost. However image is loaded on vercel when code is pushed to production.</p>
  <p>On localhost I get the following picture below. Image does not load.</p>
  <p><a href="https://i.stack.imgur.com/FfJ0o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FfJ0o.png" alt="enter image description here" /></a></p>
  <p>On production, image can be seen</p>
  <p><a href="https://i.stack.imgur.com/5VdoN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5VdoN.png" alt="enter image description here" /></a></p>
  <p>What should I do so that I can see the image on development?</p>
  <pre><code>module.exports = {
      images: {
          domains: [ 'd31wtm2rx76rut.cloudfront.net'],
      },
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;NextImage
      src=https://d31wtm2rx76rut.cloudfront.net/1604303981874
      alt=&quot;Khanna&quot;
      layout=&quot;fill&quot; /&gt;
  </code></pre>