• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud - Virtual Private Server VPS
0 głosów
415 wizyt
pytanie zadane 11 września 2021 w JavaScript przez Łukasz Sitnik Początkujący (380 p.)

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ę

1 odpowiedź

+2 głosów
odpowiedź 11 września 2021 przez niezalogowany

Ś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)

komentarz 11 września 2021 przez Łukasz Sitnik Początkujący (380 p.)
Spróbowałem pierwszego sposobu i działa dobrze. Dziękuję za pomoc.

Podobne pytania

0 głosów
1 odpowiedź 249 wizyt
pytanie zadane 17 marca 2021 w JavaScript przez mi-20 Stary wyjadacz (13,250 p.)
+1 głos
1 odpowiedź 331 wizyt
pytanie zadane 16 stycznia 2023 w JavaScript przez mi-20 Stary wyjadacz (13,250 p.)
0 głosów
1 odpowiedź 197 wizyt
pytanie zadane 27 czerwca 2021 w JavaScript przez mikey Użytkownik (820 p.)

93,327 zapytań

142,323 odpowiedzi

322,396 komentarzy

62,657 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...