Error: Invalid src prop for next/img

Answered

Stripe-headed Tanager posted this in #help-forum

Stripe-headed TanagerOP

2024-03-31T14:06:00.000Z

I am getting this error:

Unhandled Runtime Error
Error: Invalid src prop (https://azureportal.skillnet.net/UserFiles/assigntest/Pictures/Pic_assigntest_56206_Avatar.png) on next/image, hostname "azureportal.skillnet.net" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

here is my next.config.js

/ @type {import('next').NextConfig} */
const nextConfig = {
//output: 'export',
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'azureportal.skillnet.net',
port: '',
pathname: '/UserFiles/assigntest/Pictures/'
}
]
}
};

what am I doing wrong?

Answered by Ray

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

View full answer

26 Replies

@Stripe-headed Tanager I am getting this error: Unhandled Runtime Error Error: Invalid src prop (https://azureportal.skillnet.net/UserFiles/assigntest/Pictures/Pic_assigntest_56206_Avatar.png) on `next/image`, hostname "azureportal.skillnet.net" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host here is my next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { //output: 'export', images: { remotePatterns: [ { protocol: 'https', hostname: 'azureportal.skillnet.net', port: '', pathname: '/UserFiles/assigntest/Pictures/**' } ] } }; what am I doing wrong?

Ray

2024-03-31T14:10:46.000Z

try

/ @type {import('next').NextConfig} */
const nextConfig = {
    //output: 'export',
    images: {
        remotePatterns: [
          {
            protocol: 'https',
            hostname: 'azureportal.skillnet.net',
            port: '',
            pathname: '/UserFiles/assigntest/Pictures/**'
          }
        ]
      }
};

Stripe-headed TanagerOP

2024-03-31T14:13:24.000Z

I already had the ** in the pathname - it just did not come over to discord. I copied exactly what you sent to Next config and got the same error

@Stripe-headed Tanager Click to see attachment

Ray

2024-03-31T14:15:03.000Z

this work for me

Stripe-headed TanagerOP

2024-03-31T14:15:15.000Z

Ray

2024-03-31T14:16:03.000Z

Stripe-headed TanagerOP

2024-03-31T14:16:09.000Z

which version of next.js are you using?

Ray

2024-03-31T14:16:13.000Z

14.1.0

do you happen to have next.config.js and next.config.mjs in the project root?

Stripe-headed TanagerOP

2024-03-31T14:17:16.000Z

just next.config.js

just did npm i next and have this version now

Ray

2024-03-31T14:18:16.000Z

do you see this when you change the config file?

and try this and see if it work?

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "**",
      },
    ],
  },
};

Stripe-headed TanagerOP

2024-03-31T14:19:03.000Z

what does your complete next.config.js look like?

@Ray and try this and see if it work? ts /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { hostname: "**", }, ], }, };

Ray

2024-03-31T14:19:16.000Z

just this now

Ray

2024-03-31T14:19:23.000Z

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;