Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NextJs use images in public folder in markdown post [duplicate]

Tags:

next.js

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?

like image 841
warrenfitzhenry Avatar asked Dec 04 '25 14:12

warrenfitzhenry


1 Answers

ah ok.

you omit the public folder in the source reference:

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

like image 175
warrenfitzhenry Avatar answered Dec 07 '25 16:12

warrenfitzhenry



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!