Nuxt.jsで画像をバインディングする方法2018年8月

Nuxt.jsで画像をバインディングするする方法

自分用のメモとして記す。

今回は、初期に入っている src/assets/logo.png を親コンポーネントから子コンポーネントに渡してみる。

require方式→うまくいかなかった

検索すると、以下のようにrequireでpropsから渡ってきた画像を囲んで、返ってきた文字列を<img :src="返ってきた文字列">のやり方があった。
が、requireなんて関数ねえよって怒られた。

親

src/pages/top.vue

<template>
  <div class="top">
    <MainVisual image_url="../../assets/logo.png">
  </div>
</template>

<script>
import MainVisual from '../commons/MainVisual'
export default {
  name: 'Top',
  components: {
    MainVisual
  }
}
</script>

子

src/components/commons/MainVisual.vue

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

<script>
export default {
  name: 'MainVisual',
  props: {
    image_url: String
  },
  data () {
    src: require(this.image_url)
  }
}
</script>

import方式→うまくいった

解決策として、以下のように親コンポーネントで使用する画像をimportしておき、それを子コンポーネントに渡した。

親

src/pages/top.vue

<template>
  <div class="top">
    <MainVisual :image_url="src">
  </div>
</template>

<script>
import MainVisual from '../commons/MainVisual'
import MainImage from '../../assets/logo.png'
export default {
  name: 'Top',
  components: {
    MainVisual
  },
  data () {
    return {
      src: MainImage
    }
  }
}
</script>

子

src/components/commons/MainVisual.vue

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

<script>
export default {
  name: 'MainVisual',
  props: {
    image_url: String
  }
}
</script>