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

Question 1

मेरे पास एक ऐसा मामला है जहां मेरे वेब ऐप के Vue.jsसाथ 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">

मेरा मामला इस फिडेल के समान है , लेकिन यहां यह img URL के साथ काम करता है, लेकिन वास्तविक फ़ाइल पथों के साथ मेरा काम नहीं करता है।

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

Question 2

मुझे यह काम कोड का पालन करके मिला है

  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>

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

Question 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)
}

और मुझे लगता है कि यहाँ पहले 2 पैराग्राफ बताते हैं कि यह क्यों काम करता है? कुंआ।

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

Question 4

आप requireफ़ंक्शन को आज़मा सकते हैं । इस तरह:

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

Question 5

संपत्ति के बजाय सार्वजनिक फ़ोल्डर में अपनी छवि फ़ाइलों को जोड़कर ऐसा करने का एक और तरीका है और उन्हें स्थिर छवियों के रूप में एक्सेस करना है।

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

यह वह जगह है जहां आपको अपनी स्थिर छवियां डालने की आवश्यकता है:

Question 6

आपका सबसे अच्छा दांव सिर्फ दिए गए इंडेक्स पर छवि के लिए सही स्ट्रिंग बनाने के लिए एक सरल विधि का उपयोग करना है:

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

फिर अपने अंदर निम्नलिखित करें v-for:

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

यहाँ JSFiddle (स्पष्ट रूप से चित्र नहीं दिखाते हैं, इसलिए मैंने छवि के srcबगल में छवि रखी है ):

https://jsfiddle.net/q2rzssxr/

Question 7

मैंने इस समस्या को भी मारा और ऐसा लगता है कि दोनों सबसे उत्कीर्ण उत्तर काम करते हैं, लेकिन एक छोटी सी समस्या है, वेबपैक ब्राउज़र कंसोल (त्रुटि: त्रुटि का पता नहीं लगा सकता है।

इसलिए मैंने इसे थोड़ा अलग तरीके से हल किया है। स्टेटमेंट के अंदर वैरिएबल के साथ पूरी समस्या यह है कि बंडलिंग के दौरान स्टेटमेंट की आवश्यकता होती है और उस स्टेटमेंट के अंदर वैरिएबल केवल ब्राउज़र में ऐप निष्पादन के दौरान दिखाई देता है। इसलिए वेबपैक आवश्यक छवि को किसी भी तरह अपरिभाषित देखता है, जैसे संकलन के दौरान कि चर मौजूद नहीं है।

मैंने जो किया वह रैंडम इमेज को स्टेटमेंट में डालने और उस इमेज को css में छुपाने के लिए था, इसलिए इसे कोई नहीं देखता।

// template
<img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt />

//js
data() {
  return {
    userAvatar: require('@/assets/avatar1.svg'),
    hidden: true
  }
}

//css
.hidden {display: none}

छवि Vuex के माध्यम से डेटाबेस से जानकारी के हिस्से के रूप में आती है और एक गणना के रूप में घटक के लिए मैप की जाती है

computed: {
  user() {
    return this.$store.state.auth.user;
  }
}

इसलिए एक बार यह जानकारी उपलब्ध होने के बाद मैं आरंभिक छवि को वास्तविक पर स्वैप करता हूं

watch: {
  user(userData) {
    this.userAvatar = require(`@/assets/${userData.avatar}`);
    this.hidden = false;
  }
}

Question 8

यहाँ बहुत ही सरल उत्तर है। : डी

<div class="col-lg-2" v-for="pic in pics">
   <img :src="`../assets/${pic}.png`" :alt="pic">
</div>

Question 9

तुम नहीं छवियों के साथ मदद करने के लिए पकड़ने के ब्लॉक का उपयोग कर सकते हैं

getProductImage(id) {
          var images = require.context('@/assets/', false, /\.jpg$/)
          let productImage = ''
          try {
            productImage = images(`./product${id}.jpg`)
          } catch (error) {
            productImage = images(`./no_image.jpg`)
          }
          return productImage
},

Question 10

<img src="../assets/graph_selected.svg"/>

स्थिर पथ को लोडर के माध्यम से वेबपैक द्वारा मॉड्यूल निर्भरता के रूप में हल किया जाता है। लेकिन गतिशील पथ के लिए आपको पथ को हल करने के लिए उपयोग करने की आवश्यकता होती है। फिर आप बूलियन वैरिएबल और टर्नरी एक्सप्रेशन का उपयोग करके छवियों के बीच स्विच कर सकते हैं।

<img :src="this.graph ? require( `../assets/graph_selected.svg`) 
: require( `../assets/graph_unselected.svg`) " alt="">

और बेशक कुछ घटना हैंडलर के माध्यम से बूलियन के मूल्य को टॉगल करें।

Question 11

Vue.js का उपयोग करता है vue-loader, WebPack के लिए एक लोडर जो संकलन समय पर पथों को फिर से लिखने / परिवर्तित करने के लिए सेट है, ताकि आप स्थैतिक रास्तों के बारे में चिंता न कर सकें जो कि तैनाती के बीच भिन्न होंगे (स्थानीय, देव, एक होस्टिंग या अन्य) , आप रिश्तेदार स्थानीय फाइल सिस्टम पथ का उपयोग करने की अनुमति देकर । यह एसेट कैशिंग और वर्जनिंग जैसे अन्य लाभों को भी जोड़ता है (आप इसे वास्तविक srcURL उत्पन्न होने की जाँच करके देख सकते हैं )।

इसलिए एक src होने जो सामान्य रूप से vue-loader/ WebPack द्वारा एक गतिशील अभिव्यक्ति के लिए संभाला जाता है , रनटाइम पर मूल्यांकन किया जाता है, इस तंत्र को दरकिनार करेगा और उत्पन्न गतिशील URL वास्तविक तैनाती के संदर्भ में अमान्य होगा (जब तक कि यह पूरी तरह से योग्य न हो, यह एक अपवाद है )।

यदि इसके बजाय, आप requireडायनामिक एक्सप्रेशन में फ़ंक्शन कॉल का उपयोग करेंगे , vue-loader/ WebPack इसे देखेगा और सामान्य जादू लागू करेगा।

उदाहरण के लिए, यह काम नहीं करेगा:

<img alt="Logo" :src="logo" />

computed: {
    logo() {
        return this.colorMode === 'dark'
               ? './assets/logo-dark.png'
               : './assets/logo-white.png';
    }
}

जबकि यह काम करेगा:

<img alt="Logo" :src="logo" />

computed: {
    logo() {
        return this.colorMode === 'dark'
               ? require('./assets/logo-dark.png')
               : require('./assets/logo-white.png');
    }
}

मुझे अभी खुद इस बारे में पता चला है। मुझे एक घंटा लगा लेकिन ... आप रहते हैं, आप सीखते हैं, है ना? 😊

Question 12

मेरे लिए काम करने का सबसे अच्छा और आसान तरीका यही था जिसमें मैं एक एपीआई से डेटा प्राप्त कर रहा था।

methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 }

getPic विधि में एक पैरामीटर होता है जो फ़ाइल का नाम होता है और यह फ़ाइल के पूर्ण पथ को आपके सर्वर से फ़ाइल के सरल फ़ाइल के साथ लौटा देता है ...

यहाँ एक घटक का एक उदाहरण है जहाँ मैंने इसका उपयोग किया है:

<template>
    <div class="view-post">
        <div class="container">
     <div class="form-group">
             <label for=""></label>
             <input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here">
             <small id="helpId" class="form-text user-search text-muted">search for a user here</small>
           </div>
           <table class="table table-striped ">
               <thead>
                   <tr>
                       <th>name</th>
                       <th>email</th>
                       <th>age</th>
                       <th>photo</th>
                   </tr>
                   </thead>
                   <tbody>
                       <tr v-bind:key="user_data_get.id"  v-for="user_data_get in data_response.data">
                           <td scope="row">{{ user_data_get.username }}</td>
                           <td>{{ user_data_get.email }}</td>
                           <td>{{ user_data_get.userage }}</td>
                           <td><img :src="getPic(user_data_get.image)"  clas="img_resize" style="height:50px;width:50px;"/></td>
                       </tr>

                   </tbody>
           </table>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
export default {
     name: 'view',
  components: {

  },
  props:["url"],
 data() {
     return {
         data_response:"",
         image_path:"",
     }
 },
 methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 },
 created() {
     const res_data = axios({
    method: 'post',
    url: this.url.link+"/view",
   headers:{
     'Authorization': this.url.headers.Authorization,
     'content-type':this.url.headers.type,
   }
    })
    .then((response)=> {
        //handle success
      this.data_response = response.data;
      this.image_path = this.data_response.user_Image_path;
       console.log(this.data_response.data)
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });
 },
}
</script>


<style scoped>

</style>

Question 13

मैंने उसी समस्या का सामना किया। इसने '../assets/' को './assets/' में बदलकर मेरे लिए काम किया।

 <img v-bind:src="'./assets/' + pic + '.png'" v-bind:alt="pic">

Question 14

यहाँ सभी जवाबों की कोशिश की लेकिन Vue2 पर मेरे लिए जो काम किया वह इस तरह है।

<div class="col-lg-2" v-for="pic in pics">
   <img :src="require(`../assets/${pic.imagePath}.png`)" :alt="pic.picName">
</div>