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

Share Improve this question Follow edited Sep 28, 2018 at 23:05 mruanova 7,12566 gold badges4040 silver badges5858 bronze badges asked Sep 28, 2018 at 18:50 JackJackJackJack 63233 gold badges1212 silver badges2929 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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>