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