我正在创建一个对象数组，其中有一个名为coverSrc的图像src属性，我正在将其导出和导入到我的主组件中。在我的主组件中，我正在使用材质UI CardMedia组件来显示图像。但它给了我以下错误：
next/image上的src属性无效，主机名“res.cloudinary.com“未配置在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"],
  },
}

我认为从数组中导入对象的属性coverSrc存在一些问题。
有谁能帮我弄明白吗？我如何从对象数组中导出coverSrc属性？