title: Next js images Error: Invalid src prop on `next/image`
body: <p>I'm having the following error in next.js, I'm a beginner and I'm not able to understand the problem, could someone help please?</p>
  <p>i can't find what i need to do to fix that, i already tried many things but still with the same error.</p>
  <p>Error that i get:</p>
  <pre><code>Server Error
  Error: Invalid src prop (blob:http://localhost:3000/850a9a8b-591d-42f9-8d9d-8bb3e6c7cd94) on `next/image`, hostname &quot;&quot; is not configured under images in your `next.config.js`
  See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
  This error happened while generating the page. Any console logs will be displayed in the terminal window.
  Source
  src/pages/_document.js (12:8) @ Object.ctx.renderPage
  
    10 | try {
    11 |   ctx.renderPage = () =&gt;
  &gt; 12 |     originalRenderPage({
       |    ^
    13 |       enhanceApp: (App) =&gt; (props) =&gt;
    14 |         sheet.collectStyles(&lt;App {...props} /&gt;),
    15 |     });
  Call Stack
  Function.getInitialProps
  src/pages/_document.js (17:33)
  </code></pre>
  <p>my next.config.js file:</p>
  <pre class="lang-js prettyprint-override"><code>const withPlugins = require('next-compose-plugins');
  const withImages = require('next-images');
  
  const nextConfig = {
    target: 'serverless',
    future: {
      webpack5: true,
    },
    images: {
      domains: ['http://localhost'],
    },
  };
  
  module.exports = withPlugins([[withImages]], nextConfig);
  </code></pre>
  <p>the component part that i use Image:</p>
  <pre class="lang-js prettyprint-override"><code>{
    releasesData.slice(0, 5).map((release) =&gt; (
      &lt;ContainerSpotifyCardsContent&gt;
        &lt;Image
          src={release.image}
          alt={`Pra cego ver: Capa do ${release.tags} ${release.music}`}
          width={90}
          height={90}
          layout=&quot;responsive&quot;
        /&gt;
        &lt;div className=&quot;textContent&quot;&gt;
          &lt;span className=&quot;songName&quot;&gt;{release.music}&lt;/span&gt;
          &lt;span className=&quot;bandName&quot;&gt;{release.artist}&lt;/span&gt;
          &lt;span className=&quot;styleName&quot;&gt;{release.tags}&lt;/span&gt;
          &lt;div className=&quot;typeContent&quot;&gt;
            &lt;span&gt;{release.type}&lt;/span&gt;
            &lt;a href={release.links} target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;
              {SpotifyComponent(&quot;#000&quot;)}
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ContainerSpotifyCardsContent&gt;
    ));
  }
  </code></pre>
  <p>my _document.js file:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Document from 'next/document';
  import { ServerStyleSheet } from 'styled-components';
  
  export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet();
      const originalRenderPage = ctx.renderPage;
  
      try {
        ctx.renderPage = () =&gt;
          originalRenderPage({
            enhanceApp: (App) =&gt; (props) =&gt;
              sheet.collectStyles(&lt;App {...props} /&gt;),
          });
  
        const initialProps = await Document.getInitialProps(ctx);
        return {
          ...initialProps,
          styles: (
            &lt;&gt;
              {initialProps.styles}
              {sheet.getStyleElement()}
            &lt;/&gt;
          ),
        };
      } finally {
        sheet.seal();
      }
    }
  }
  </code></pre>