1

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]
  }
}
mazha
  • 45
  • 1
  • 7
  • You can just create the `next.config.js` in the root of the Next.js app. – juliomalves Oct 29 '21 at 16:15
  • Hi @juliomalves! I updated my question, can you take a look? – mazha Oct 29 '21 at 21:35
  • Are you still seeing the exact same error? What value do you have for `process.env.API_STORAGE_DOMAIN`? – juliomalves Oct 29 '21 at 21:38
  • @juliomalves Yes, .env is `.env.production` and `.env.development` and inside this files have: `API_STORAGE_DOMAIN=the-project-name-bucket.s3.amazonaws.com` – mazha Oct 29 '21 at 22:21
  • You're setting the s3 bucket domain but the error complains about `localhost` not being configured: _"hostname "localhost" is not configured under images in your next.config.js"_. – juliomalves Oct 29 '21 at 22:24
  • Exactly @juliomalves, where I configure that? In `.env`? – mazha Oct 29 '21 at 22:26
  • Wherever you want. You could just try hardcoding `'localhost'` in the `domains` array, in addition to what you already have, just to test it works. That array can contain several domains. – juliomalves Oct 29 '21 at 22:27
  • Wow it worked @juliomalves, thank you very much! wanted to rate your answer, but thanks again anyway!! – mazha Oct 29 '21 at 22:38

2 Answers2

1

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

mazha
  • 45
  • 1
  • 7
0

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`

ionosphere
  • 373
  • 2
  • 13
  • Where I make this function? – mazha Oct 29 '21 at 01:08
  • You should be able to make the function in the same file with the image component. The loader function overrides any default loader in the image section of next.config.js, if present. See the example in the next.js image loader function documentation: https://nextjs.org/docs/api-reference/next/image – ionosphere Oct 29 '21 at 01:16