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:
How can insert an image in Nuxt.js Markdown from this location? assets/images/blog/trees.png
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:
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
place your images in static folder with this path :
static/images/img1.png
In markdown file, use this syntax:
In vue files, use like this :
<template>
<img src="/images/img1.png" />
</template>
or for use with content :
1- in content/articles/new-post.md :
---
title: Title
description: This is description
img: /images/img1.png
alt: Article 1
---
## Example
2- in vue file (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>
notes :
Looks like relative paths are not currently available: https://github.com/nuxt/content/issues/693#issuecomment-750412810
Only absolute paths should work after placing the image in the /static directory
