错误：`next/image` 上的 src 属性无效，主机名“res.cloudinary.com”未在 `next.config.js` 中的图像下配置

问题描述

我正在创建一个对象数组，其中我有一个名为“coverSrc”的图像 src 属性，我将其导出并将其导入到我的主要组件中。在我的主要组件中，我使用 Material 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,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 属性~？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

material-ui nextjs-image