Nuxt.js：如何在Markdown博客内容中包含本地图片？

Question

我在Nuxt.js中创建了一个使用Markdown的博客，当我写第一篇文章时，我发现无法从我的assets文件夹中将图像包含在我的markdown文章中。只有像下面的链接这样才有效：

Markdown 图片:

如何从这个位置assets/images/blog/trees.png在Nuxt.js中插入一张图片到Markdown文章中呢？

- Ibrahim Timimi

---

当你说你的博客使用 markdown. 你是指使用 nuxt-content 吗？ - ManUtopiK

是的，可以使用nuxt-content。 - Ibrahim Timimi

我尝试使用![alt text](~/assets/images/blog/trees.png)，但它不起作用。 - Ibrahim Timimi

你必须使用 nuxt export 重新加载 webpack。请查看我的回答。 - ManUtopiK

Answer 1

在你的Vue文件中，你可以通过以下方式访问assets文件夹中的图片:

<template>
  <img src="~/assets/your_image.png" />
</template>

在Markdown文件中，您可以使用Markdown语法完成相同的操作：

![image alt text](~/assets/your_image.png)

然而，由于你在content文件夹中的文件独立于webpack，所以每次向assets文件夹中添加文件时，你需要运行nuxt generate。

更多信息请参见： https://nuxtjs.org/docs/2.x/directory-structure/assets/ https://github.com/nuxt/content/issues/106

- ManUtopiK

---

我尝试使用 nuxt export，但仍然无法在我的文章中显示图像。它也说 nuxt export 已被弃用。 - Ibrahim Timimi

抱歉，现在是 nuxt generate。 - ManUtopiK

@ManUtopiK 哎呀，每次生成一个全新的项目真的很耗时间。如果你知道该去哪里，那么这样做是好的，但在我看来，直接指定绝对路径会更快。 - kissu

Answer 2

将图片放置在静态文件夹中，路径为：static 文件夹。

static/images/img1.png

在 markdown 文件中，使用以下语法：

![image alt text](/images/img1.png)

在Vue文件中，使用方法如下：

<template>
  <img src="/images/img1.png" />
</template>

或者用于内容的使用：

1- 在content/articles/new-post.md中：

---
title: Title
description: This is description
img: /images/img1.png
alt: Article 1
---

## Example

2- 在 Vue 文件中（pages/index.vue）：

<template>
  <div>
    <div v-for="article of articles" :key="article.slug">
      <h1>{{ article.title }}</h1>
      <img
        v-if="article.img"
        class="h-48 xxlmin:w-1/2 xxlmax:w-full object-cover"
        :src="article.img"
      />
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const articles = await $content('articles', params.slug)
      .only(['title', 'description', 'img'])
      .fetch()

    return {
      articles,
    }
  },
}
</script>

注意事项：

1. 将您的图像放置在静态文件夹中，例如（static/images/*）。
2. 在地址的开头使用 '/'。 正确示例：/images/img1.png 错误示例：images/img1.png

- Mahdad

Answer 3

从 Nuxt 3 开始，您可以使用 nuxt-content-assets 模块将图像存储在与 markdown 相同的文件夹中。

运行时，它会将所有在内容源中找到的图像复制到构建时的文件夹中，并将任何匹配的相对路径替换为公共路径，并使用 Nitro 服务于这些图像。

在构建时，图像被复制到最终的构建输出中。

- Dave Stewart

Answer 4

看起来相对路径目前不可用：https://github.com/nuxt/content/issues/693#issuecomment-750412810 只有在将图像放置在/static目录后，绝对路径才能正常工作。

![alt text](/images/blog/trees.png)

- kissu

---

疯了。Atinux回答了这个问题，但这只是一个快速的响应，因为你可以使用资产文件夹。每次添加图像时，您只需要运行nuxt export即可。请参见此处：https://github.com/nuxt/content/issues/106 - ManUtopiK

将图像放置在静态文件夹中，然后像这样包含图像![image alt text](/images/blog/trees.png)就可以了！我只需要本地包含图像，不一定要从资产文件夹中获取。谢谢@kissu。 - Ibrahim Timimi