Error: Invalid src prop on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`

Question

I'm creating an array of objects where I have an image src property whose name is coverSrc, and I'm exporting & importing it into my main component. In my main component, I m using the Material UI CardMedia component to display images. but it gives me the following error:

Invalid src prop on next/image, hostname "res.cloudinary.com" is not configured under images in your next.config.js

data.js

export const dataList = [
{
    id: 1,
    title: "Dim Sums",
    serviceTime: "24-30min",
    deliveryFee: 1.5,
    category: "dish",
    cuisine: "chinese",
    rating: 2,
    price: 4100,
    coverSrc: "https://res.cloudinary.com/arifscloud/image/upload/v1625119382/image_apxesv.png",
  },
{
    id: 2,
    title: "Dim loups",
    serviceTime: "22-35min",
    deliveryFee: 1.3,
    category: "dish",
    cuisine: "italian",
    rating: 3,
    price: 3100,
    coverSrc: "https://res.cloudinary.com/arifscloud/image/upload/v1627596941/image_apiop.png",
  },
]

ListItem.jsx

import {
  Card,
  CardHeader,
  Avatar,
  CardMedia,
  CardContent,
  Typography,
} from "@material-ui/core";
import React from "react";
import useStyles from "../../../styles/style.js";
import Image from "next/image"


const ListItem = ({
  item: { coverSrc, title, price, deliveryFee, serviceTime, rating },
}) => {
  const classes = useStyles();
  return (
    <Card className={classes.listItemMainDiv}>
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.ratingAvatar}>
            {rating}
          </Avatar>
        }
        title={title}
      />
      <CardMedia className={classes.media} title="List item" >
          <Image src={coverSrc} layout="fill" alt="image"/>
      </CardMedia>
      <CardContent>
        <Typography variant="body2" color="textSecondary" component="p" gutterBottom>
          Delivery Fee ${deliveryFee}
        </Typography>
      </CardContent>
      <div className={classes.cardFooter}>
        <Typography>{serviceTime}</Typography>
        <Typography>{price}</Typography>
      </div>
    </Card>
  );
};

export default ListItem;

next.config.js

// next.config.js
module.exports = {
  images: {
    domains: ["res.cloudinary.com"],
  },
}

I think import from array of object's property coverSrc there is some problem.

Can anyone help me to figure it out? How can I export coverSrc property from an array of objects?

Answer 1

Add the domain to your next.config.js like this:

module.exports = {
  reactStrictMode: true, 
  images: {
    domains: ['res.cloudinary.com'],
  },
}

Important!: Make sure you restart your server each time you change the config file.

Answer 2

Change the extension of next.config file to js, not cjs or ts

Answer 3

This seem to work for me:

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  optimizeFonts: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
      },
    ],
    minimumCacheTTL: 1500000,
  },
};

module.exports = nextConfig;

Answer 4

Possible Ways to Fix It

Add the protocol, hostname, port, and pathname to the images.remotePatterns config in next.config.js:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        // You can add these as well
        // port: '',
        // pathname: 'arifscloud/image/upload/**',
      },
    ],
  },
}

If you are using an older version of Next.js prior to 12.3.0, you can use images.domains instead:

// next.config.js
module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
  },
}

Answer 5

For me, in next.config.js,

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [ "abc.def.org", ]
  },
}

module.exports = nextConfig

and then in my Image tag

<Image
  unoptimized // <- for image caching, else error
  src={profile.picture}
  alt={profile.picture || "IMG"}
  width={60}
  height={60}
/>