如何在markdownit插件中链接图像

Question

我正在使用 Nuxt 和 Strapi js 编写一个博客网站。我使用 markdownit 插件转换文章中的富文本。

！[下载(2).jpg](/uploads/download_2_ec8ea31ab6.jpg)

它将这张图片变成这样：

scr =“/上传/download_2_ec8ea31ab6.jpg”

我如何添加它：http://localhost:1337/

插件使用：

markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    injected: true,
    typographer: true
  },

Answer 1

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,
  }