降价元数据或前题中的NextJs图片

Question

我需要加载来自降价元数据的图像

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

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

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

如何在不使用下一个图像之类的插件的情况下解决此问题。感谢您的帮助

Answer 1

Nextjs可以在根目录中名为public的文件夹下提供图像。 在根目录中添加一个文件夹，将其命名为“ public”，并在其中添加资产

示例：

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

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

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

Nextjs将为您处理其余的工作。 有关Static File Serving

的更多信息