Studio Terabyte is a full stack web development studio who finds and builds solutions that fit your project
What is Nuxt Content?
@Nuxt/Content is a NuxtJS module which you can use to easily use Git as an headless CMS to build a blog or case study archive for your website. This means that instead of a CMS like Wordpress or Strapi where you would write your content normally, you can simply write the article in Markdown (a .md file), add this file to your Git repository and your NuxtJS app can retrieve the content as if it communicates with a fullblown CMS. This makes for an easy to maintain compact web app where the layout and content live in one place.
The problem
Eventhoug this is a good solution, @Nuxt/Content has one large shortcomming: There is no standard ways to add images to your content. Simply adding a HTML image tag to the Markdown file like so:
<img src="assets/images/image.png"></img>
will not work because Nuxt/Content can't retrieve images from the /assets folder because it is seperate from Webpack. There has been a discussion going on GitHub, but on the moment of writing, July 2021, there is no solution from Nuxt/Content itself.
The solution
The fact that there is no standard support for images does not mean that there is no solution. Besides HTML tags in the Markdown files, @Nuxt/Content also supports Vue components. This means that we can create a Vue component which will retrieve and load an image within Nuxt/Content.
In the /components folder create MarkdownImage.vue, open the file and add the following code:
<template>
<img :src="imgSrc()" :alt="alt" />
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
},
alt: {
type: String,
required: true,
},
},
methods: {
imgSrc() {
try {
return require(`~/assets/images/${this.src}`)
} catch (error) {
return null
}
},
},
}
</script>
Okay, let's go through the code. Between the <template> tags there is a standard HTML image tag. This tag retrieves the location of the image by using the imgSrc() function and the alt description via the alt prop which can be passed to the component when it is being used.
In the <script> part we define two props which can be passed to the component when it is being used: the location of the image (src) and the alt description (alt). Next we define the imgSrc() function within the methods section which will retrieve the image from the location passed to it and handle any possible errors.
When you now want to add an image to a Markdown file, you can do so by using the Vue component like this:
---
title: Nuxt content & images
short: How to use images in Nuxt Content
image: carbon.png
tags:
- code
- nuxt
- markdown
---
## Intro
This is you you add an image to Markdown files:
<markdown-image src="name-of-blog-post/image.png" alt="Alt text"></markdown-image>
The rest of the article...
That's it! You can now use images in your @Nuxt/Content Markdown files 🖼!