@Zectposted at 2022-02-11

[Vue.js] vue-markdownを使った画像表示

Q&A

Vue.js vue-markdown

解決したいこと

Vue.jsで"vue-markdown"を使って外部のmarkdownファイルを読み込んでweb上で表示しようとしています。

プロジェクト作成は、この記事と全く同じ方法で行いました。

発生している問題・エラー

この、src/assets/img/1.jpgを表示しようとすると、alt属性が表示される

project
├─public
└─src
    ├─assets
    │  └─img
    │     └─1.jpg
    ├─pages
    │  └─a.md
    └─views
       └─mark.vue

.vueファイルに直接記述するとうまくいきますが、外部から持ってくると、画像が読み込まれません。

該当するソースコード

mark.vue

<template>
  <div class="greet">
    <h1>ブログ</h1>
    <!-- 画像が読み込まれない -->
    <VueMarkdown :source="mdText" />
    <!-- 画像が表示される -->
    <VueMarkdown :source="<img src='@/assets/img/1.jpg' width='45%'>" />
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import a from '@/pages/a.md'

export default {
  name: 'Markdown',
  data () {
    return {
      mdText: a
    }
  },
  components: {
    VueMarkdown
  }
}
</script>

a.md

# test
hello world

## one
hi

## two
hello

<img src='@/assets/img/1.jpg' width='45%' alt="img">

# text
aaaaa

自分で試したこと

ここに書いてあることを試してみましたが、うまくいきませんでした。

この、公式のsampleだと、画像表示はうまくいってますが、僕が使っているのは、webpackのではなく、vue-uiデフォルトのvue2プロジェクトで、ファイル構成が全く違うので、あまり参考にはなりませんでした。

Are you sure you want to delete the question?