Nextjs Image Component - Remote Images

Question

I am very new to the nextjs and have come across the Image component issue. I also checked around and it seems that there are similar questions but none of them has the given scenario.

I am trying to load image from the remote source via Image component. The documentation saying that you should adjust your next.config.js file to allow remote images. Since I am using next 13.0.3 version I am using images.remotePatterns property. Despite this fact I am still getting an error of hostname not being configured.

Can you please suggest what I am doing wrong and how to overcome that problem?

Br, Aleks.

next.config.js

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'swiperjs.com',
        port: '',
        pathname: '/demos/images/**',
      }
    ],
  },

Usage:
        <Image
          src="https://swiperjs.com/demos/images/nature-1.jpg"
          className={styles.swiperslideimg}
          alt="test" width={400} height={400}/>

Error: Invalid src prop ( https://swiperjs.com/demos/images/nature-1.jpg ) on next/image , hostname "swiperjs.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Answer 1

That configuration should work. Note that you have to restart the development server by rerunning yarn run dev or npm run dev for these configuration changes to take effect.

Answer 2

I faced the same problem and found the solution i was using Notus NextJS which had a slightly older version of nextjs so i ran

npm outdated

and updated the package.json and ran

npm run install:clean

Answer 3

Try to leave just that:

images: {
    remotePatterns: [
      {
        hostname: 'swiperjs.com',
      }
    ],
},