【Vue/Nuxt.js】コンテキストルートをつけてstaticフォルダの画像を参照する

staticフォルダにあるファイルはルートに配置されるため、参照する際には@または~を使えばいいのですが、コンテキストルートを指定している場合は小細工が必要となります。ちょっとわかりずらかったので記録を残しておきます。

コンテキストルートなしの例

imgタグを使った場合の例です

<img src="@/logo-text.png"  />

コンテキストルートありの例

https://ドメイン/hoge/とする場合の例です。
↓nuxt.configの設定抜粋。

module.exports = {
//
// 略
//
  router: {
    base: `/hoge/`
  },
//
// 略
//
}

imgタグでの指定のしかた

<img :src="$router.options.base + 'logo-text.png'"  />

多用するのであれば関数かコンポーネント作ってしまった方が便利なのではないかと思います。