NextJs从Markdown元数据或前置信息中获取图片。

Question

我需要加载来自markdown元数据的图像。

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

当我将这个传递给我的代码并检查浏览器时，图像的src只是下面的路径。它没有像其他图片一样转换为静态/...

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

我如何在不使用任何插件，例如next-images的情况下解决这个问题。感谢您的帮助。

- SajZ

Answer 1

Next.js可以在名为public的文件夹下提供图像服务，该文件夹位于您的根目录下。 在根目录下添加一个名为“public”的文件夹，并将您的资源添加到其中。

例如：

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

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

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

Next.js会为您处理其余部分。 更多关于静态文件服务的内容。

- Idir Hamouch