错误:'next/image'上的src属性无效,res.cloudinary.com在您的'next.config.js'中的图像下没有配置主机名“www.example.com“

bbuxkriu  于 2022-11-23  发布在  其他
关注(0)|答案(3)|浏览(245)

我正在创建一个对象数组,其中有一个名为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属性?

dohp0rv5

dohp0rv51#

将域添加到next.config.js,如下所示:

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

重要信息!:确保每次更改配置文件时都重新启动服务器。

a1o7rhls

a1o7rhls2#

next.config文件的扩展名更改为js,而不是cjsts

kmpatx3s

kmpatx3s3#

这似乎对我有用:

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

module.exports = nextConfig;

相关问题