NextJs在markdown文章中使用public文件夹中的图片

Question

我正在使用gray-matter在Next.js中编写Markdown文章，但在访问图像以用于博客文章时遇到了问题。

这是我的getStaticProps：

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const fileName = fs.readFileSync(`posts/${params.slug}.md`, 'utf-8')
  const { data: frontmatter, content } = matter(fileName)
  return {
    props: {
      frontmatter,
      content,
    },
  }
}

在我的公共文件夹中，我有：

public
 - images
  - triangle.jpg

我的博客文章看起来像这样：

---
# title: 'Home'
metaTitle: 'blah'
metaDesc: 'blah- blah'
date: '2022-09-30'
---

### Blah Blah

blah-de-blah, blah blah blah

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

我已经阅读了Next.js的文档，了解如何访问静态文件，但是我该如何使用Markdown来访问它们呢？

- warrenfitzhenry

Answer 1

好的。

你在源引用中省略了public文件夹：

![rightangle](/images/right-angle-triangle.jpeg) 改为如下写法。

- warrenfitzhenry

---

那么换句话说，您省略了公共文件夹？您能否编辑答案并使其对未来读者更清晰？谢谢。 - zenly