Vue.js गतिशील छवियां काम नहीं कर रही हैं

Question

मेरे पास एक ऐसा मामला है जहां में webpack वेब ऐप के साथ, मुझे गतिशील छवियां प्रदर्शित करने की आवश्यकता है। मैं img दिखाना चाहता हूं जहां छवियों का फ़ाइल नाम एक चर में संग्रहीत किया जाता है। वह चर computed संपत्ति है जो Vuex स्टोर चर लौटा रही है, जिसे beforeMount पर असीमित रूप से पॉप्युलेट किया जा रहा है।

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

हालांकि यह पूरी तरह से काम करता है जब मैं सिर्फ कार्य करें:

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

मेरे मामले इस fiddle के समान है, लेकिन यहाँ यह img यूआरएल के साथ काम करता है, लेकिन वास्तविक फ़ाइल पथ के साथ खान में, यह नहीं है काम।

इसे करने का सही तरीका क्या होना चाहिए?

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

यहाँ:

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

फिर अपने v-for अंदर निम्न कार्य करें:

Answer 1

मैं कोड निम्नलिखित

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

द्वारा और HTML में इस काम की है:

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

लेकिन यकीन है कि क्यों मेरे पहले दृष्टिकोण काम नहीं किया नहीं।

Answer 2

आपका सबसे अच्छा शर्त सिर्फ एक सरल विधि का उपयोग करने दिए गए इंडेक्स पर छवि के लिए सही स्ट्रिंग का निर्माण करना है जेएसफ़िल्ड (जाहिर है कि छवियां नहीं दिखती हैं, इसलिए मैंने छवि के बगल में छवि src डाली है):

https://jsfiddle.net/q2rzssxr/

Answer 3

यहां एक शॉर्टलैंड है जिसका उपयोग वेबपैक करेगा, इसलिए आपको require.context का उपयोग करने की आवश्यकता नहीं है।

HTML:

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

Vue विधि:

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

और मुझे लगता है कि here में पहले 2 पैराग्राफ स्पष्टीकरण दें कि इस काम करता है? अच्छी तरह से।

कृपया ध्यान दें कि अपने पालतू चित्रों को एक उपनिर्देशिका के अंदर रखना, यह आपकी सभी अन्य छवि संपत्तियों के साथ लॉबिंग करने के बजाय एक अच्छा विचार है। इस तरह: ./assets/pets/