javascript - Imagini dinamice Vue.js care nu funcționează cu webpack

Am un caz în care, în aplicația mea web Vue.js cu webpack, trebuie să afișez imagini dinamice. Vreau să afișez img unde numele fișierelor imaginilor sunt stocate într-o variabilă. Acea variabilă este o proprietate computed care returnează o variabilă din magazinul Vuex, care este populată asincron la beforeMount.

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

Totuși, funcționează perfect când fac doar:

<img src="../assets/dog.png" alt="dog">

Cazul meu este similar cu acest exemplu, dar aici funcționează cu URL de imagine, dar în al meu, cu căi de fișiere reale, nu funcționează.

Care ar trebui să fie modul corect de a face asta?

Răspuns #1

Am reușit să fac să funcționeze asta urmând codul

  getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
  }

și în HTML:

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

Dar nu sunt sigur de ce abordarea mea anterioară nu a funcționat.

Răspunsul #2

Iată o prescurtare pe care webpack o va folosi astfel încât să nu fie nevoie să folosești require.context.

HTML :

<div class="col-lg-2" v-for="pic in pics">
    <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

Metoda Vue:

getImgUrl(pic) {
    return require('../assets/'+pic)
}

Și constat că primele 2 paragrafe de aici explică de ce funcționează asta? bine.

Vă rugăm să rețineți că este o idee bună să puneți pozele cu animalele de companie într-un subdirector, în loc să le amestecați cu toate celelalte resurse de imagine. Așa: ./assets/pets/

Răspunsul #3

Poți încerca funcția require. astfel:

<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />

Simbolul @ indică către directorul src.

sursa: reguli de transformare URL în Vue

Răspunsul #4

Există o altă modalitate de a face acest lucru prin adăugarea fișierelor tale de imagine în folderul public în loc de assets și accesarea acestora ca imagini statice.

<img :src="'/img/' + pic + '.png'" alt="pic" >

Aici trebuie să pui imaginile tale statice:

Răspunsul #5

Cea mai sigură opțiune este să folosești pur și simplu o metodă simplă pentru a construi șirul corect pentru imaginea de la indicele dat:

methods: {
  getPic(index) {
    return '../assets/' + this.pics[index] + '.png';
  }
}

atunci fă următoarele în interiorul v-for:

<div class="col-lg-2" v-for="(pic, index) in pics">
   <img :src="getPic(index)" v-bind:alt="pic">
</div>

Iată JSFiddle (evident, imaginile nu se afișează, așa că am pus src-ul imaginii lângă imagine):

https://jsfiddle.net/q2rzssxr/