next.js - 错误:`next/image` 上的 src 属性无效,主机名“res.cloudinary.com”未在 `next.config.js` 中的图像下配置
问题描述
我正在创建一个对象数组,其中我有一个名为 的图像 src 属性coverSrc
,并且我正在将其导出并导入到我的主要组件中。在我的主要组件中,我使用 Material UI CardMedia 组件来显示图像。但它给了我以下错误:
src 属性无效
next/image
,主机名“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 属性?
解决方案
像这样将域添加到您的next.config.js
:
module.exports = {
reactStrictMode: true,
images: {
domains: ['res.cloudinary.com'],
},
}
重要的!:确保每次更改配置文件时都重新启动服务器。
推荐阅读
- python - 绘制直方图时遍历数据框
- python-3.x - 如何按日期对这个多解析文件脚本的结果进行排序?
- javascript - 将正则表达式与否定相结合
- javascript - 检查 utc 日期是否已更改 JavaScript
- javascript - react.js 中的常见组件问题
- javascript - 将fullcalendar javascript点击数据获取到django modelform
- sql-server - SQL Server 中列的单个数据中后跟管道符号的数字计数
- silverstripe-4 - 如何在silverstripe中创建带有成功消息重定向的自定义html表单?
- python - Docker 在默认安装的 git 路径而不是 Windows 上的工作目录上运行
- reactjs - 安装 react-leaflet 后“您可能需要适当的加载程序来处理此文件类型”