NextJs image from markdown metadata or frontmatter

user_11684837 0
Viewed 938

I need to load the image coming from the markdown metadata

---
title: 'First Blog'
description: 'First blog description'
image: ../../common/src/assets/image/image.png
author: 'Stack'
---

When i pass this to my code the and inspect the browser, the image src is just the path below. it's not converting to the static/... as usual for the other images

<img src={post.frontmatter.image} />

How do i get this fixed without using any plugins like next-images. Thanks for the help

next.js markdown image
1 Answers

Nextjs can serve images under a folder called public in your root directory. Add a folder to your root call it "public" and Add your assets to it

EXAMPLE:

public
--common
----src
------assets
--------image
----------image.png

---
image: "/common/src/assets/image/image.png"
---

---
<img src={post.frontmatter.image} />
---

Nextjs will take care of the rest for you. More on Static File Serving

user_125652770
Related