Nuxt.jsでimgタグのsrc属性をバインディングする時にちょっと困った

imgタグのsrcをバインディング

sample.vue

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

<script>
export default {
    data () {
        return {
            imgUrl: "~/assets/hoge.png"
        }
    }
}
</script>

ページ上では
<img src="~/assets/hoge.png">

と出力されるのだが、画像は表示してくれない。

解決法

https://ja.nuxtjs.org/guide/assets/
上記公式サイトによるとnuxtではこうコンパイルされるらしい

というわけで、こう書いたらちゃんと表示されました。

sample.vue

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

<script>
// 開発時はimage loaderでblobにして読み込む。本番時には設定で良い感じにurlになったりする。
import HogeImage from '~/assets/hoge.png';

export default {
    data () {
        return {
            img: HogeImage
        }
    }
}
</script>