I tried to get image cover at notion to show notion cover photo in my portfolio site.
I get cover url at query data list and show notion data base cover in my portfolio_site.
import Image from "next/image";
export default function ProjectItem({data}){
const Title = data.properties.Name.title[0].plain_text
const githublink = data.properties.Github.url
const youtubelink = data.properties.Youtube.url
const description = data.properties.Description.rich_text[0].plain_text
const imgSrc = data.cover.file?.url || data.cover.external.url
console.log(imgSrc)
return (
<div className="flex flex-col p-6 m-3 bg-slate-700 rounded-md">
<a>
<Image
scr={imgSrc}
width={100}
height={60}
/>
</a>
<h1>{Title}</h1>
<h3>{description}</h3>
<a href={githublink}>깃허브 바로가기</a>
<a href={youtubelink}>유튜브 시연영상 보러가기</a>
</div>
);`
}
But images are corrupted in my site like this.
So I attempt to modify next.config.js. I made images domain arrary.
But nothing is solved.
And I tried console.log to check if image source links are get in const imageSrc.
enter image description here
It is good to receive image source links.
What is wrong with my code? Is that I something to miss out?
-> 단순 scr을 src로 바꿔야하는 오타 문제였다.... 이미지가 안불러와지는건 태그의 src의 오타로 링크가 안불러와진것! ㅠㅠ
Plus Error solution)
https://nextjs.org/docs/messages/next-image-unconfigured-host