Next.js如何导入指定图片并获取构建后路径用于next-seo配置

我正在使用next-seo包，请问如何导入指定图片并在NextSeo组件的图片配置项中获取构建后的正确图片名称/访问URL？

原有代码：

<NextSeo
  title="a certain title"
  description="a certain description"
  canonical="https://www.d"
  openGraph={{
    url: "https://www.tandartsenpraktijk-herckenrode.be",
    title: "a certain title",
    description: "a certain description",
    images: [
      {
        url: "?????",
      },
    ],
    site_name: "A certain name",
  }}
/>

分两种常见场景处理即可：

场景1：图片存放在public目录（推荐） #

• 将需要用到的OG图片直接放在项目根目录的public文件夹下，例如命名为og-cover.jpg
• public目录下的资源构建后会直接映射到站点根路径，无需额外导入
• 提前在环境变量（如.env.local）中配置站点根域名：NEXT_PUBLIC_SITE_URL=https://www.tandartsenpraktijk-herckenrode.be，拼接路径即可得到完整访问地址

场景2：图片存放在源码静态资源目录（如src/assets） #

• 用ES模块导入语法引入图片，Next.js构建时会自动为图片添加哈希戳，返回构建后的正确资源路径
• 导入后拼接站点域名即可得到完整可访问的OG图片地址

完整实现代码 #

import NextSeo from 'next-seo';
// 场景2需要添加导入语句，场景1无需导入
// import ogImage from '@/assets/og-cover.jpg';

export default function YourPage() {
  return (
    <NextSeo
      title="a certain title"
      description="a certain description"
      canonical="https://www.d"
      openGraph={{
        url: "https://www.tandartsenpraktijk-herckenrode.be",
        title: "a certain title",
        description: "a certain description",
        images: [
          {
            // 场景1写法
            url: `${process.env.NEXT_PUBLIC_SITE_URL}/og-cover.jpg`,
            // 场景2写法，Next.js 12及更早版本直接用 `${process.env.NEXT_PUBLIC_SITE_URL}${ogImage}` 即可
            // url: `${process.env.NEXT_PUBLIC_SITE_URL}${ogImage.src}`,
            width: 1200,
            height: 630,
            alt: "页面预览图"
          },
        ],
        site_name: "A certain name",
      }}
    />
  )
}

注意事项 #

• Open Graph协议要求图片必须使用完整的绝对路径，不能填写相对路径，否则社交平台无法正常抓取预览图
• 建议OG图片尺寸控制为1200*630px，适配绝大多数社交平台的预览展示要求

内容的提问来源于stack exchange，提问作者David Verhulst