3

I'm using gray-matter to write markdown posts in nextjs, but having trouble accessing images to use in the blog posts.

this is my 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,
    },
  }
}

in my public folder I have:

public
 - images
  - triangle.jpg

and my blog post looks like this:

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

### Blah Blah

blah-de-blah, blah blah blah

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

I've read the documentation on nextjs about accessing static files, but how do I access them using markdown?

warrenfitzhenry
  • 2,209
  • 8
  • 34
  • 56

1 Answers1

5

ah ok.

you omit the public folder in the source reference:

![rightangle](/images/right-angle-triangle.jpeg) instead.

warrenfitzhenry
  • 2,209
  • 8
  • 34
  • 56
  • So in other words, you omit the public folder? Could you please edit the answer and make it clearer to future readers? Thanks. – kelsny Oct 08 '22 at 04:08