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

Posted 2023-03-06

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

【英文标题】：Error: Invalid src prop on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`

【发布时间】：2021-09-13 06:24:54

【问题描述】：

我正在创建一个对象数组，其中我有一个名为 coverSrc 的图像 src 属性，并且我正在将其导出并导入到我的主要组件中。在我的主要组件中，我使用 Material UI CardMedia 组件来显示图像。但它给了我以下错误：

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

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" />
      </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 属性？

【参考方案1】：

像这样将domain 添加到您的next.config.js：

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

重要提示！：确保每次更改配置文件时都重新启动服务器。

【讨论】：

你的意思是双引号是这里的问题？

是的，当我重新启动服务器并且它工作正常时，这对我有用，谢谢