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

Question

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

Markdown 图片：

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

Answer 1

看起来相对路径当前不可用：https://github.com/nuxt/content/issues/693#issuecomment-750412810

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

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

Answer 2

在您的 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

Answer 3

将您的图片放在静态文件夹中，路径如下：

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 假 => images/img1.png

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

Nuxt.js: How to include local images in Markdown blog content?

markdown

vue.js

nuxt.js