Next.js中在Markdown文章引用public文件夹图片的问题

问题根源 #

你当前Markdown中图片路径写了/public/images/triangle.jpg，但Next.js的public文件夹是静态资源的根目录，访问静态资源时不需要带上/public前缀。

直接解决方案 #

修改Markdown里的图片路径，去掉/public前缀：

![triangle](/images/triangle.jpg)

为什么这样可行？ #

Next.js会将public文件夹下的资源映射到网站根路径，比如public/images/triangle.jpg对应的实际访问URL是/images/triangle.jpg，所以直接使用根相对路径即可正确加载图片。

批量处理旧文章（可选） #

如果有大量已发布的Markdown文章都使用了/public前缀，不想手动逐个修改，可以在getStaticProps中批量替换路径：

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const fileName = fs.readFileSync(`posts/${params.slug}.md`, 'utf-8')
  const { data: frontmatter, content } = matter(fileName)
  // 全局替换所有 /public/ 为 /
  const processedContent = content.replace(/\/public\//g, '/')
  return {
    props: {
      frontmatter,
      content: processedContent,
    },
  }
}

渲染注意事项 #

如果你使用remark/rehype等工具将Markdown转为HTML，确保工具不会修改图片路径。比如使用remark-html时，会直接将Markdown图片语法转为<img src="/images/triangle.jpg" alt="triangle">，Next.js可以正常识别这个路径。

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