imgのファイル指定をv-bindでする時

Vue.jsでimgタグのsrc指定を変数で行う場合、そのままだと使えないので注意

TL;DR

require()を使用する

やってみる

※この例ではNuxtも使用しています

そのまま変数を置いてみる

<template>
  <img :src="pass">
</template>

<script>
export default {
  data() {
    return {
      pass: '~/assets/test-img.png'
    }
  }
}
</script>

なんとなくいけるような気はするが、結果は 404エラー となってしまいます。
どうやら、相対パスを表す ~ 部分が、 そのまま文字列として 読み込まれてしまっている模様。（たぶん）

モジュールとして読ませる

そこで、 require() を利用する。

<template>
  <img :src="pass">
</template>

<script>
export default {
  data() {
    return {
      pass: require('~/assets/test-img.png')
    }
  }
}
</script>

これで晴れて表示させることができます！（表示例がないのでわかりにくいですが...）

（おまけ）static配下の画像の場合

指定したい画像がstatic配下だと、require使わずとも表示させることができます。

<template>
  <img :src="pass">
</template>

<script>
export default {
  data() {
    return {
      pass: 'test-img.png'
    }
  }
}
</script>

template内で直接指定する場合、
~/static/test-img.png は test-img.png と書くことで、自動でstatic配下に補完してくれるようです。
相対パスの記述がないので、変数で文字列として読ませても、うまく作動するようです。

便利〜〜〜