画面上に画像を特定数分、繰り返し表示したい
解決したいこと
vue.jsでWebページを作成しています。
特定の画像を繰り返し表示したいのですが、上手くいきません。
解決方法を教えてください。
該当するソースコード
<li v-for="image in images" :key="image.index">
<img :src="image.src" alt="">
</li>
<br>
<image v-for="n in 5" :key="n">{{ "image2.src" }}</image>
images: [
{ index: 1,
src: "https://drive.google.com/uc?export=view&id=1IR24pMQ6-A1cgiSEhIIR7p5TwPnqr5no"
},
{ index: 2,
src: "https://drive.google.com/uc?export=view&id=1IR24pMQ6-A1cgiSEhIIR7p5TwPnqr5no"
},
{ index: 3,
src: "https://drive.google.com/uc?export=view&id=1IR24pMQ6-A1cgiSEhIIR7p5TwPnqr5no"
},
{ index: 4,
src: "https://drive.google.com/uc?export=view&id=1IR24pMQ6-A1cgiSEhIIR7p5TwPnqr5no"
},
{ index: 5,
src: "https://drive.google.com/uc?export=view&id=1IR24pMQ6-A1cgiSEhIIR7p5TwPnqr5no",
},
{ index: 6,
src: "https://drive.google.com/uc?export=view&id=1IR24pMQ6-A1cgiSEhIIR7p5TwPnqr5no"
},
],
images2: [
{
index:1,
image: "https://drive.google.com/uc?export=view&id=1IR24pMQ6-A1cgiSEhIIR7p5TwPnqr5no"
},
]
}
}
実装イメージ
赤くハイライトした部分と同じように指定した数の分だけ画像を表示したい
自分で試したこと
リンク先を参考に配列の画像を複数表示することはできました。
こちらのサイトを参考に特定の画像を繰り返し表示するコードサンプルを探しましたが
そちらは見つかりませんでした。
また、配列処理を参考にコードを変更してみましたが、文字列として認識されているようで
画像が表示されません。
0
