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]
}
}
Problem solved! I just add "localhost" in my domains in next.config.js
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: