Vue.jsでfor文で画像番号に順番をつけていきたい

Question

Nuxt+vuetifyでv-forを使いvue-awesome-swiper内に繰り返しを表示させたいと思い下記のようなソースをかきました。

<template lang="pug">
swiper(:options="swiperOption")
  swiper-slide(v-for="(item, index) in items" :key="index")
    v-img(:src="item.slideimage")
    {{ item.title }}
</template>

<script>
let items = [];
for(let i=1; i<=5; i++)
{
  items.push({
    no: i,
		title: 'title' + i,
		slideimage: require("@/assets/images/home/slide01.jpg") ,
  });
}

export default {	
	data () {
		return {
			items:items,
                        // 省略
		}
	}
}
</script>

タイトルを自動で数字順に追加していきたいと思いscript内でfor文でまわし、順番に追加していくようにしました。

ここで画像の部分で詰まってしまいました。

上記の書き方に画像の部分だけかいてみましたがいまいち表示せず

slideimage: require("@/assets/images/home/slide{#i}.jpg") 
slideimage: require("'@/assets/images/home/slide' + {#i} + '.jpg") 
slideimage: require("'@/assets/images/home/slide' + i + '.jpg") 
slideimage: require("'@/assets/images/home/slide' + [i] + '.jpg'")

繰り返しに変数を代入するにはどのように記述すればよいのかの情報を探しています。

Comments

[miyabi-sun]

質問ですが、
画像ファイルがassets内のままHTMLファイルに埋め込まれる手法は基本的には非推奨ですが、
そうしなければいけない背景等があるんでしょうか？
そうではないのなら、普通に画像ファイルをWebサーバで配信するようにして、そのURLをsrc属性にはめ込めば良いだけです。

[ttkun]

assetsとstaticの立ち位置がいまいちわかっておらず、webpackを使うならassetsフォルダにいれておくぐらいの認識でした。
上記の実装ではnuxt内に画像を保存するなら適切な保存先は違うということでしょうか？

[miyabi-sun]

なるほど、Nuxtの思想に関して調査したのも合わせて納得の行く答えが得られました。
回答していきますね。

Answer 1

繰り返しに変数を代入するにはどのように記述すればよいのかの情報を探しています。

ファイル名に連番を付けていくには、全体をダブルクォーテーションで囲むのではなく

slideimage: require("'@/assets/images/home/slide' + i + '.jpg") 

このように、文字列部分と変数iを連結するようにします。

slideimage: require('@/assets/images/home/slide' + i + '.jpg') 

これはJavaScritpの変数展開を使うと、下記のようにもう少し簡潔に記述できます。
※シングルクォートで囲っているのではなくバッククォートで囲っている点にご注意ください。

slideimage: require(`@/assets/images/home/slide${i}.jpg`) 

これでファイル名に変数iによる連番を付加することができると思いますが、ファイル名の連番部分が前0を付けた"slide01.jpg"のようなフォーマットだと、変数iが一桁のときに前0を付加する処理が必要になります。

以下が全体のコードになります。

<script>
export default {
  data() {
    const items = []
    for (let i=1; i<=5; i++) {
      items.push({
        no: i,
        title: 'title' + i,
        slideimage: require(`@/assets/images/home/slide${this.zeroPadding(i, 2)}.jpg`)
      })
    }
    return {
      items
    }
  },
  methods: {
    zeroPadding(index, size) {
      let tmp = index + ''
      while (tmp.length < size) tmp = '0' + tmp
      return tmp
    }
  }
}
</script>

Comments

[ttkun]

ありがとうございます。Javascriptの基本的なことで大変勉強になります。

Answer 2

この記事がよくまとまっており、参考になったので抜粋しながら説明します。

参考記事: Nuxt.js｜画像の参照方法のいろいろ

まとめると、

• データ容量の小さな画像は「assets」に格納
• データ容量の大きな画像は「static」に格納

と覚えておくと良いかと思います。

WebpackはJSファイルを払い出す為に、
画像ファイルを無理やり文字列化してJSファイル内にねじ込む設計となっています。
こういうものは小さな画像アイコンが基本です。

スライドショー等で見せたいような画像は分離した方が、
コンパイルの時間も減るでしょうしオススメです。

v-img(:src="item.slideimage")という指定なので
単なるimg要素のsrc属性なので、上記の記事の「staticディレクトリの画像を参照する」のやり方がオススメです。

let items = [];
for(let i=1; i<=5; i++)
{
  items.push({
    no: i,
    title: 'title' + i,
    slideimage: "images/home/slide01.jpg",
  });
}

Comments

[ttkun]

ありがとうございます。
今後のファイルの格納場所の参考になりました。