I have 100 images named 1.png to 100.png in my assets folder. I want to display them using v-for, but I don't wanna hard code every url for them.

<div v-for="n in 100">
    <img src="../assets/photos/(1.png, 2.png...).png">
</div>

What should I do for the (1.png, 2.png...)? Should I use put them into data?

I have 100 images named 1.png to 100.png in my assets folder. I want to display them using v-for, but I don't wanna hard code every url for them.

<div v-for="n in 100">
    <img src="../assets/photos/(1.png, 2.png...).png">
</div>

What should I do for the (1.png, 2.png...)? Should I use put them into data?

• javascript
• vue.js
• vuejs2
• v-for

1 Answer 1

Use template literals to construct the src dynamically and then use v-bind:src to bind the src attribute:

<div v-for="n in 100">
    <img v-bind:src="`../assets/photos/${n}.png`">
</div>