next-sitemap站点地图中image:loc显示undefined的解决咨询

我在使用next-sitemap生成站点地图时，遇到image:loc在浏览器查看XML时显示为undefined的问题，需要展示博客中的图片。终端中console.log可以正常显示图片链接，但浏览器中却显示undefined。目前我在代码中用字符串占位image路径，待问题解决后会替换为实际路径。另外，我已尝试使用next-sitemap库自带的自定义Transform函数（在next-sitemap.config.js中配置），但仍出现image:loc显示undefined的情况。

站点地图截图：

博客数据对象（包含image字段） #

{
  status: 200,
  data: [
    {
      _id: '6511c2cbc3ae7d1923a19a52',
      slug: 'buying-gold-in-toronto:-tips-for-local-investors',
      status: 'Publish',
      meta: [Object],
      image: 'Chapters_GTA-Page.png',
      title: 'Buying Gold in Toronto: Tips for Local AU Bullion',
      categories: [Array],
      createdAt: '2023-09-25T17:26:35.580Z'
    },
    {
      _id: '6511d646c3ae7d1923a19f5f',
      slug: 'the-2024-1-oz-gold-kangaroo-coin-from-the-perth-mint',
      status: 'Publish',
      meta: [Object],
      image: '024-kangaroo-gold-coin.jpeg',
      title: 'The 2024 1 Oz Gold Kangaroo Coin from The Perth Mint',
      categories: [Array],
      createdAt: '2023-09-25T18:49:42.943Z'
    },
  ],
  totalBlogs: 3
}

当前Index.js代码 #

import { getServerSideSitemapLegacy } from "next-sitemap";
import { GetServerSideProps } from "next";
import axiosInstance from "../../helper";
import { siteUrl, transform } from "../../next-sitemap.config";

export const getServerSideProps = async (ctx) => {
  const response = await fetch(
    `${axiosInstance.defaults.baseURL}/getallblogs`,
    { next: { revalidate: 3600 } }
  );
  const blogs = await response.json();
  console.log(blogs);

  const fields = blogs.data.map(({ slug }) => {
    return {
      loc: `${siteUrl}/blogs/${slug}`,
      lastmod: new Date().toISOString(),
      images: [{ loc: "image.jpg" }],
    };
  });

  return getServerSideSitemapLegacy(ctx, fields);
};

// Default export to prevent next.js errors
export default function Sitemap() {}

当前next-sitemap.config.js代码 #

// const siteUrl = "http://localhost:3000";

module.exports = {
  siteUrl: process.env.SITE_URL || "http://localhost:3000",
  generateRobotsTxt: true,
  sitemapSize: 7000,
  exclude: [
    "/blogs-sitemap.xml",
    "/products-sitemap.xml",
    "/checkout",
    "/cart",
    "/account",
    "/orderplaced",
    "/profile",
  ],
  transform: async (config, path) => {
    return {
      loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      images: [{ loc: "image.jpg" }],
    };
  },
  sitemapSize: 7000,
  robotsTxtOptions: {
    policies: [
      {
        userAgent: "*",
        allow: "/",
      },
      {
        userAgent: "test-bot",
        allow: ["/path", "/path-2"],
      },
      {
        userAgent: "black-listed-bot",
        disallow: ["/sub-path-1", "/path-2"],
      },
    ],
  },
};

请问如何正确配置，让image:loc在站点地图中正常显示？

问题原因及解决方法 #

1. 核心问题点 #

• getServerSideSitemapLegacy要求images.loc必须是完整绝对URL，不能用相对路径或占位符
• 全局配置的transform函数会覆盖单独站点地图的字段设置，导致图片配置被重置
• 当前代码未从博客数据中正确提取image字段

2. 具体修复步骤 #

步骤1：修改博客站点地图的字段生成逻辑

从博客数据中提取image字段并拼接成完整绝对URL，同时移除无用的transform导入：

import { getServerSideSitemapLegacy } from "next-sitemap";
import { GetServerSideProps } from "next";
import axiosInstance from "../../helper";
import { siteUrl } from "../../next-sitemap.config";

export const getServerSideProps = async (ctx) => {
  const response = await fetch(
    `${axiosInstance.defaults.baseURL}/getallblogs`,
    { next: { revalidate: 3600 } }
  );
  const blogs = await response.json();

  const fields = blogs.data.map(({ slug, image }) => {
    // 根据你的图片实际存储路径调整拼接规则，示例假设图片在public/images/blogs目录下
    const imageFullUrl = `${siteUrl}/images/blogs/${image}`;
    return {
      loc: `${siteUrl}/blogs/${slug}`,
      lastmod: new Date().toISOString(),
      images: [{ loc: imageFullUrl }],
    };
  });

  return getServerSideSitemapLegacy(ctx, fields);
};

export default function Sitemap() {}

步骤2：移除全局transform配置

删除next-sitemap.config.js中的transform函数，避免干扰单独站点地图的配置：

module.exports = {
  siteUrl: process.env.SITE_URL || "http://localhost:3000",
  generateRobotsTxt: true,
  sitemapSize: 7000,
  exclude: [
    "/blogs-sitemap.xml",
    "/products-sitemap.xml",
    "/checkout",
    "/cart",
    "/account",
    "/orderplaced",
    "/profile",
  ],
  robotsTxtOptions: {
    policies: [
      {
        userAgent: "*",
        allow: "/",
      },
      {
        userAgent: "test-bot",
        allow: ["/path", "/path-2"],
      },
      {
        userAgent: "black-listed-bot",
        disallow: ["/sub-path-1", "/path-2"],
      },
    ],
  },
};

步骤3：验证图片路径正确性

确保代码中拼接的图片URL和实际存储路径一致，比如图片存在public/blog-images/下，就把拼接逻辑改成${siteUrl}/blog-images/${image}。

3. 验证结果 #

重启Next.js服务后，访问/blogs-sitemap.xml，即可看到image:loc字段显示正确的图片绝对URL，不再是undefined。

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