Budowanie ścieżki z v-bind:src - vue.js

Question

Konkatenuję ścieżkę w :scr i po wybudowaniu widoku nie wyświetlają się obrazki - ścieżki nie są budowane tak jak w przypadku użycia normalnego src. Oto mój komponent:

 

<template>
  <div class="rewards">
      <img v-bind:src="'../assets/photos/rewards/reward' + i + '.jpg'" alt="reward image" v-for="i in 10" v-bind:key="i">

      <img src="../assets/photos/rewards/reward1.jpg" alt="reward image">
  </div>
</template>


<script>
export default {
    name: 'Rewards',
}
</script>

<style lang="scss" scoped>

</style>

W templatce znajduje się v-for który ma stworzyć 10 elementów img i dla każdego ma być inny scr, a dla porównania poniżej znajduje się pojedynczy img z niekonkatenowanym src. W pierwszym przypadku obrazki się nie wyświetlają, w drugim wszystko dobrze działa. A przyczyną są ścieżki.

Dlaczego vue nie przebudowuje ścieżek w takim przypadku? Co zrobić, żeby zaczął przebudowywać?
Dziękuję

Answer 1

Ścieżki do plików rozwiązywane są przez webpack na poziomie kompilacji.

W przypadku zastosowania pętli for, src tworzy się dopiero na poziomie wykonywania kodu.

Rozwiązania są dwa

1. Dać znać webapckowi, że ścieżka będzie rozwiązywana w runtime'ie:

<img :src="require('../assets/photos/rewards/reward' + i + '.jpg')" ...

2. Umieścić obrazki w folderze public (wtedy nie przechodzą przez webpacka, nie są optymalizowane, czy co tam sobie w webpacku ustawisz)

Comments

Spróbowałem pierwszego sposobu i działa dobrze. Dziękuję za pomoc.