Next.js站点中Notion封面图片无法显示，求问题排查

问题场景 #

我尝试在个人作品集站点中获取Notion的封面图片并展示，通过查询数据列表拿到了封面URL，用Next.js的Image组件渲染，但站点里的图片显示损坏。

代码如下：

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>
    );
}

已尝试的步骤 #

• 修改next.config.js添加图片域名数组，没解决问题；
• 用console.log确认imgSrc已经拿到正确的图片链接，但图片还是无法显示。

问题原因与解决办法 #

1. 直接拼写错误 #

你在Image组件里把图片路径属性src写成了scr，这是图片加载失败的核心原因，修正拼写就能解决问题：

<Image 
    src={imgSrc} // 把scr改成src
    width={100}
    height={60}
    alt={Title} // 建议加上alt属性，提升页面可访问性
/>

2. 额外检查点 #

如果改完拼写还是不行，再排查下面几点：

• next.config.js配置是否正确：Notion的图片域名不止一个，要把相关域名都加上，示例配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['notion.so', 's3.us-west-2.amazonaws.com', 'prod-files-secure.s3.us-west-2.amazonaws.com'],
  },
}

module.exports = nextConfig

• Notion链接是否过期：Notion返回的文件链接可能带临时签名，有效期短。如果是这种情况，得通过Notion API的文件下载接口拿永久链接，或者在服务端代理图片请求。
• 尺寸是否匹配：确认width和height的比例和图片实际尺寸一致，避免显示异常。

内容的提问来源于stack exchange，提问作者minsing-jin