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

【问题标题】：Nuxt.js: How to include local images in Markdown blog content?Nuxt.js：如何在 Markdown 博客内容中包含本地图片？
【发布时间】：2021-04-20 15:45:04
【问题描述】：

我在 Nuxt.js 中创建了一个博客，我的文章使用 Markdown。在写我的第一篇文章时，我意识到我不能在我的 assets 文件夹中的降价文章中包含图像。仅当它是如下示例的链接时才有效：

降价图片：

如何从这个位置在 Nuxt.js Markdown 中插入图像？ assets/images/blog/trees.png

【问题讨论】：

当你说你的博客使用降价。您的意思是使用 nuxt-content 吗？
是的，使用 nuxt-content。
我尝试使用![alt text](~/assets/images/blog/trees.png)，但它不起作用。
你必须用nuxt export重新加载webpack。看我的回答。

标签： vue.js nuxt.js markdown

【解决方案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。

【讨论】：

我尝试使用nuxt export，但它仍然不会在我的文章中显示图像。它还说nuxt export 已弃用。
抱歉，现在是nuxt generate
@ManUtopiK 该死的，每次生成一个全新的项目真的很耗时。如果你知道去哪里很好，但可以更快地以绝对方式 IMO 指定它。

【解决方案2】：

将您的图像放在具有此路径的静态文件夹中：

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>

注释：

将图片放在静态文件夹中，例如 (static/images/*)
在地址开头使用“/” 真 => /images/img1.png 假 => 图像/img1.png

【讨论】：

【解决方案3】：

相对路径目前似乎不可用：https://github.com/nuxt/content/issues/693#issuecomment-750412810

将图像放入/static 目录后，只有绝对路径才有效

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

【讨论】：

疯了。 Atinux 回答了这个问题，但这是一个快速响应，因为您可以使用 assets 文件夹。每次在其中添加图像时，您只需要运行nuxt export。见这里：github.com/nuxt/content/issues/106
将图像放在静态文件夹中，然后包含像这样的图像![image alt text](/images/blog/trees.png) 工作！我只需要在本地包含图像，不一定来自资产文件夹。谢谢@kissu。