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

nuxt.jsで:src="require(変数)"で画像パスを指定する時に。。

More than 1 year has passed since last update.

nuxt.jsでサイトを作る際にちょっと詰まったのでメモ。

詰まったところ

nuxt.jsはassetsに画像ファイルを置くとsrc="require('@/assets/hoge.jpg')"で参照出来るので、
繰り返しの要素で変数に画像パスを格納して、それを使って画像を表示させようとしました。
しかしどんなにパスを確認しても、`Cannot find module '@/assets/hoge.jpg'"と、画像が参照出来ませんでした。

hoge.vue
<template lang="pug">
  v-container(grid-list-lg fluid pa-0)
    v-layout(row wrap)
      template(v-for="(pr, index) in prContents")
        v-flex(xs12 md4 :key="index")
          v-card
            v-img(:src="require(pr.image)" height="300")
            v-container(fill-height fluid pa-2)
              v-layout(fill-height)
                v-flex(xs12 align-end flexbox)
                  span(class="headline white--text" v-text="pr.title")
</template>

<script>
export default {
  name: 'HomeConcept',
  data () {
    return {
      prContent: [
        {
          title: 'タイトル1',
          contents: 'コンテンツ',
          image: '@/assets/hoge1.jpg'
        },
       {
          title: 'タイトル2',
          contents: 'コンテンツ',
          image: '@/assets/hoge2.jpg'
        },
       {
          title: 'タイトル3',
          contents: 'コンテンツ',
          image: '@/assets/hoge3.jpg'
        },
      ]
    }
  }
}
</script>

<style scoped  lang="stylus">

</style>

解決策

require内で、パスが単純な文字列として認識されてnuxt.jsの@が解決出来ず、参照出来ないため、
require()をdataオブジェクトの中で実行するように変更します。

data() {
  return {
    prContents: [
      {
        title: "タイトル1",
        contents: "コンテンツ",
        image: require("@/images/hoge.jpg")
      }
    ]
  }
}

修正コード

hoge.vue
<template lang="pug">
  v-container(grid-list-lg fluid pa-0)
    v-layout(row wrap)
      template(v-for="(pr, index) in prContents")
        v-flex(xs12 md4 :key="index")
          v-card
            v-img(:src="pr.image" height="300")
            v-container(fill-height fluid pa-2)
              v-layout(fill-height)
                v-flex(xs12 align-end flexbox)
                  span(class="headline white--text" v-text="pr.title")
</template>

<script>
export default {
  name: 'HomeConcept',
  data () {
    return {
      prContents: [
        {
          title: 'タイトル1',
          contents: 'コンテンツ',
          image: require('@/assets/hoge1.jpg')
        },
        {
          title: 'タイトル2',
          contents: 'コンテンツ',
          image: require('@/assets/images/3pr-medical.jpg')
        },
        {
          title: 'タイトル3',
          contents: 'コンテンツ',
          image: require('@/assets/images/3pr-compassionate.jpg')
        }
      ]
    }
  }
}
</script>

<style scoped  lang="stylus">

</style>

ryo2132
Misoca. Inc / Frontend engineer / フルリモートワーク / 元消防士🚒 / 一児の父 / Ruby / Typescript / Vue.js / Firebase
misoca
郵送できるクラウド請求書管理サービス「misoca(みそか)」を開発・運営している、名古屋のスタートアップです。
http://www.misoca.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした