Vuejs: используйте v-for для отображения массива изображений из ресурсов

Question

У меня есть 100 изображений с именами от 1.png до 100.png в моей папке ресурсов.Я хочу отображать их, используя v-for, но я не хочу жестко кодировать каждый URL для них.

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

Что мне делать для (1.png, 2.png ...)?Должен ли я использовать положить их в данные?

Answer 1

Используйте литералы шаблона для динамического построения src, а затем используйте v-bind:src для привязки атрибута src:

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