Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away