I'm a beginner in React and Next, and I started working on this project. I have a feature where I need to upload a profile picture, but whenever I upload the image this is an error triggered.

Error: Invalid src prop (http://localhost:3333/files/ SOME IMAGE.jpg) on next/image, hostname "localhost" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

.next\static\chunks\pages\_app.js (604:22) @ defaultLoader

  602 |         }
  603 |         if (process.env.NODE_ENV !== 'test' && !configDomains.includes(parsedSrc.hostname)) {
> 604 |             throw new Error(`Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n`   `See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host`);
      |                  ^
  605 |         }
  606 |     }
  607 | }

My next.config.js

module.exports = {
  images: {
    domains: [process.env.API_STORAGE_DOMAIN]
  }
}

CodePudding user response：

Problem solved! I just add "localhost" in my domains in next.config.js

CodePudding user response：

You can make a loader function to load the image from its destination and then call the loader function in the loader attribute of the image tag.

Here is the syntax for a loader function (taken from the next.js loader function documentation):

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

See also the solutions here, especially Taskmaster's sample loader function code:

Got an error Invalid src prop ('here is a link') on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`