微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决错误:`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 举报,一经查实,本站将立刻删除。