时间戳

首页 > 解决方案 > Nuxt.js: How to include local images in Markdown blog content?

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

问题描述

I created a blog in Nuxt.js which uses Markdown for my articles. When writing my first article, I realized I can't include images in my markdown article from my assets folder. It only works if it's a link like the example below:

Markdown Image:

alt text

How can insert an image in Nuxt.js Markdown from this location? assets/images/blog/trees.png

标签： vue.jsnuxt.jsmarkdown

解决方案

In your vue files, you can access images in assets folder with:

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

In markdown file, you can do the same with Markdown syntax:

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

But as your files in content folder is independent of webpack, you have to run nuxt generate each time you add a file in assets folder.

More info here: https://nuxtjs.org/docs/2.x/directory-structure/assets/ https://github.com/nuxt/content/issues/106

推荐阅读