Resolve assets in markdown content

I would like to know if it’s possible to have the webpack assets resolution inside of markdown content ? To display webpack handeled’s images.

Reproduction link: https://codesandbox.io/s/dawn-snowflake-fv7l4?file=/content/post.md

1. I have an image in the assets folder
2. I link the image in the md file ![](~/assets/photo.jpg) (or <img src="~/assets/photo.jpg"> in html) the same way I would have in a component template

I’m not interested in putting files in the static folder since there is no compression and no hash for cache-busting.

[davydnorris]

Is it possible to store the images under the content directory itself instead of in the assets directory? Then you could create a structure like:

content/articles/my-new-article/index.md content/articles/my-new-article/img/pic1.jpg content/articles/my-new-article/img/pic2.jpg content/articles/my-new-article/img/pic3.jpg

which would keep all the content together.

[MuhaddiMu]

@davydnorris suggestion was helpful to me

I created a global Image component to work around with that and stored my images inside the /content/blog/my-blog-slug/images/

<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(`~/content${this.src}`)
      } catch (error) {
        return null
      }
    }
  }
}
</script>

Make sure to register this component globally. Inside components/global/Image.vue and set the components:true in nuxt.config.js

<image
          v-if="blog.Featured_Image"
          :src="blog.dir + '/images/' + blog.Featured_Image"
          :alt="blog.Title"
        >
</image>

Inside Markdown:

<image src="/blog/my-blog-slug/images/Scripts.png" alt="Scripts"></image>

I hope this will be helpful to someone. 🙌