CODEWITHSUNDEEP
next.jsjsonplaceholder
Keitaro
Keitaro

Reputation: 131

NextJs image component and jsonplaceholder external url

In a nextJS project, I want to use jsonplaceholder with /photos route.

When I try to insert image or thumbnails into Image component like bellow, I have an error.

import Image from 'next/image'
<Image src="https://via.placeholder.com/150/92c952" width={150} height={150} />

Server Error

Error: Invalid src prop (https://via.placeholder.com/150/92c952) on next/image, hostname "via.placeholder.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

When I check documentation, for external sources, and considering I'm using recent version (13), I should convert my next.config.js like that :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'via.placeholder.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
}

module.exports = nextConfig

But I still have an error, maybe because of a null port. But I don't know which port via.placeholder.com is using :(

Trying old next version with code bellow doesn't work either:

images: {
    domains: ['via.placeholder.com'],
  },

Thanks in advance

Upvotes: 0

Views: 1683

Answers (2)

Thomas Ram&#233;
Thomas Ram&#233;

Reputation: 751

Despite the settings mentioned in other answers (I tested new ones images. remotePatterns and legacy ones images.domains), none was working.

After upgrading from v13.0.7 to v13.1.6 it works now :)

Upvotes: 0

Ryan Cahill
Ryan Cahill

Reputation: 742

You don't need to use curly braces when using a string literal for the image src. You can just do something like <Image src="https://cdn.architect.io/logo/horizontal.png" width={400} height={59.5} alt="Architect Logo" />. Also if you're loading the image from a server using https, the port should be 443. For more context, I added the following in my next.config.js in order to load the image that I referenced:

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'cdn.architect.io',
    },
  ],
},

Also, when trying to load a .png from via.placeholder.com, be sure to include the file type. For example:

<Image src="https://via.placeholder.com/150/92c952.png" width={150} height={150} alt="Placeholder" />

Upvotes: 0

Related Questions