JavaScript
Vue.js
nuxt.js

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ではこうコンパイルされるらしい

スクリーンショット 2018-10-29 16.37.14.png

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


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>