How to link images in the markdownit plugin

user_13490290 0
Viewed 149

I am coding a blog site with Nuxt and Strapi js. I convert the rich text in my articles with the markdownit plugin.

! [download (2) .jpg] (/ uploads / download_2_ec8ea31ab6.jpg)

it transforms this picture like this :

scr = "/ uploads / download_2_ec8ea31ab6.jpg"

how can I add it : http: // localhost: 1337 /

plugin use:

markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    injected: true,
    typographer: true
  },
nuxt.js markdown javascript
1 Answers

This is really weird behavior that you can change your api url but you can't change your media url... In this way Strapi is really painful tool to work with markdowns and images inside... One way I found is to manually add URL to your markdown content using regexp.

  computed: {
    addPrefix() {
      const pattern = /\/uploads\//g
      return (string) =>
        // Replace URL with env variable
        string.replace(pattern, `http://localhost:1337/uploads/`)
    },
  },

And later you can use this

v-html="$md.render(addPrefix(content))"

This is only possible solution for now even in Strapi version 4

To enable $md add this to your nuxt.config.js in markdownit object:

markdownit: {
    //... your config
    runtime: true,
  }
user_98337630
Related