Situation

I tried to retrieve an image cover from Notion so that I could display the Notion cover photo on my portfolio site. I retrieved the cover URL from the query data list and displayed the Notion database cover on 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 the images were corrupted on my site, as shown here.

Trial1

So I tried modifying next.config.js. I created an image domains array.

But nothing was resolved.

Trial2

I also tried using console.log to check whether the image source links were being retrieved in the const imageSrc. Enter image description here

The image source links were being retrieved correctly.

What is wrong with my code? Is there something I’m missing?

Solved

-> It was simply a typo that required changing scr to src… The reason the image wasn’t loading was that a typo in the tag’s src prevented the link from loading! ㅠㅠ

Additional error solution) https://nextjs.org/docs/messages/next-image-unconfigured-host

• In next.config.js, https://s3.us-west-2.amazonaws.com” must be changed to “s3.us-west-2.amazonaws.com”!!