Studio Terabyte is een fullstack web development studio die oplossingen vindt en bouwt passend bij uw project
Wat is Nuxt Content?
@Nuxt/Content is een NuxtJS module waarmee je gemakkelijk Git kunt gebruiken als een headless CMS om zo bijvoorbeeld een blog te bouwen voor je website. Dit houdt in dat in plaats van een CMS zoals Wordpress of Strapi waar je normalieter artikelen in zou schrijven, je simpelweg het artikel kan schrijven in een markdown (.md) bestand, deze vervolgens toe te voegen aan je Git repository en je NuxtJS app de inhoud kan ophalen alsof het met een volwaardig CMS communiceert. Dit zorgt voor een makkelijk te onderhouden compacte web app waar de layout en content op een plek bestaan.
Het probleem
Maar ondanks dat dit een goede oplossingen is, heeft @Nuxt/Content een grote tekortkoming: Er is geen standaard manier om afbeeldingen toe te voegen. Het simpelweg toevoegen van een HTMl image tag aan een Markdown bestand zoals dit:
<img src="assets/images/image.png"></img>zal niet werken omdat Nuxt/Content geen afbeeldingen uit de /assets map kan ophalen omdat deze map los staat van Webpack. Er is al enige tijd een discussie gaande op GitHub, maar op het moment van schrijven, Juli 2021, is er nog geen oplossing vanuit Nuxt/Content zelf.
De oplossing
Het feit dat er geen standaard ondersteuning is voor afbeeldingen betekent niet dat er geen oplossing is. @Nuxt/Content ondersteunt naast HTML tags in de Markdown bestanden namelijk ook Vue componenten. Dit betekent dat wij een Vue component kunnen maken die een afbeelding ophaalt en vervolgens binnen Nuxt/Content kan laden.
In de /components map maak MarkdownImage.vue aan, open het bestand en voeg de volgende code toe:
<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>Oke, laten we code ontleden. Tussen de <template> tags staat een standaard HTML image tag. Deze tag haalt de locatie op van de afbeelding door middel van de imgSrc() functie en de alt beschrijving door middel van alt prop die meegegeven kan worden wanneer dit component wordt gebruikt.
In het <script> gedeelte definieren wij twee props die meegegeven kunnen worden wanneer wij dit component aanroepen: de locatie van de afbeelding (src) en de alt beschrijving (alt). Daarnaast maken wij de imgSrc() functie aan onder het methods gedeelte die de afbeelding ophaalt aan de hand van de locatie en eventuele errors afhandeld.
Wanneer je nu een afbeelding wilt toevoegen aan een Markdown bestand, kun je dit Vue component op deze manier gebruiken:
---
title: Nuxt content & afbeeldingen
short: Hoe afbeeldingen te gebruiken in Nuxt Content
image: carbon.png
tags:
- code
- nuxt
- markdown
---
## Inleiding
Dit is hoe je een afbeelding toevoegt aan aan Markdown bestand:
<markdown-image src="naam-van-blog-post/afbeelding.png" alt="Alt tekst"></markdown-image>
De rest van het artikel...That's it! Je kunt nu afbeeldingen gebruiken in je @Nuxt/Content Markdown bestanden 🖼!
Credits
De resources die deze oplossing hebben geinspireerd: