search

meteorlxy / vue-showdown

:page_with_curl: Use showdown as a vue component
https://vue-showdown.js.org
MIT License
129 stars 23 forks source link

Md file image problem!!! #15

Closed aycakahya closed 4 years ago

aycakahya commented 4 years ago

Vue file:

<template>
  <div id="app">
    <VueShowdown :markdown="fileContent"></VueShowdown>
  </div>
</template>

<script>
import mdFile from "!!raw-loader!../assets/welcome.md";

export default {
  data() {
    return {
      fileContent: ""
    };
  },
  mounted() {
    this.getMDFile();
  },
  methods: {
    getMDFile() {
      this.fileContent = mdFile;
    }
  }
};
</script>

welcome.md file:

![image.png](/.attachments/image-3bc078e5-c2fb-48d8-bc00-fff6dc34fb25.png)

I download the md file from the azure devops wiki. I need to use this in my project, but articles etc. But the picture is not displayed. What is the reason?

npm install vue-showdown: I made the necessary installation with.

main.js:


import VueShowdown from "vue-showdown";
import Mark from "./components/Mark.vue";
Vue.use(VueShowdown, {
  flavor: 'github',
  options: {
    emoji: true
  },
})
const router = new VueRouter({
  routes: [
 { path: '/mark', component: Mark}
  ]
})
meteorlxy commented 4 years ago

You have to download the image file, and put in the correct static path.

You need to understand that vue-showdown only parses markdown file in browser, not in webpack compilation.

In your case, I suggest you to use something like markdown-loader / vue-markdown-loader, to parse the markdown file in webpack compilation, instead of using vue-showdown

aycakahya commented 4 years ago

![image.png](/.attachments/image-3bc078e5-c2fb-48d8-bc00-fff6dc34fb25.png)

Is the method of showing the picture in this way a vue-markdown-loader? I used it this way, but again the problem has not been solved.

webpack.config.js:

var resolve = require('path').resolve
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['vue-app']
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader'
      }
    ]
  },
  devServer: {
    disableHostCheck: true
  }
}
meteorlxy commented 4 years ago

You need to understand what happens on ![image.png](/.attachments/image-3bc078e5-c2fb-48d8-bc00-fff6dc34fb25.png):

It equals <img src="/.attachments/image-3bc078e5-c2fb-48d8-bc00-fff6dc34fb25.png"> in your .vue file.

If you can make it displayed in your .vue file, it would display in your .md file

meteorlxy commented 4 years ago

vue-showdown:

vue-markdown-loader: