Adding images to Markdown in Nuxt
When I first used Nuxt Content, I wasn't sure how to add images in my markdown files. There are more than one way to do this, I'll show here the ones that I'm aware of.
WARNING: if you want to deploy to GitHub Pages, you have to use Vue Component method, because your links to images in Markdown won't be changed by router's base property.
Static + ![]()
This is the first way I found out and that was used in this site in development. I put images in my static folder, named them properly in my own system (optional): url_with_distinction_using_underscores and then wrote in markdown .
All my images on _slug.vue page are styled the same, so this way was imo the easiest.
Static + HTML
You can use HTML directly in your Markdown. Combining this with images in static folder you can embed images like this:
Your markdown
<img src="/image.jpg"></img>
Your markdown
Vue Component
For methods shown in this section you need Nuxt >= v2.13.0 and Nuxt Content >= v1.4.0.
First you need to create ImageComponent.vue and put it in components/global folder
<template>
<img :src="src" />
</template>
<script>
export default {
props: ["imageSource"],
computed: {
src() {
return require("@/assets/" + this.imageSource);
},
},
};
</script>
Because webpack aliases are executed at compile time you need the require() function when <img> src is v-binded.
Then put your images in assets folder.
Final step is simply to use custom component in your Markdown. It has to be kebab-cased, so do props and it cannot be <self-closing />.
Your markdown
<image-component image-source="image.jpg"></image-component>
Your markdown