मेरे पास एक बाध्य स्रोत मान वाली एक छवि है

<img :src="image.url">

जब image.url अपडेट हो जाता है, तो पुरानी इमेज तब तक बनी रहती है जब तक कि नई इमेज लोड नहीं हो जाती। यह थोड़ा अजीब लग सकता है क्योंकि नई छवि परिवर्तन पर टेक्स्ट विवरण से पीछे है।

जब src प्रॉपर्टी vue.js से बदल जाती है, तो मैं इमेज को लोडिंग इंडिकेटर से कैसे बदल सकता हूं?

मैं उस कोड के साथ डीओएम मैनिपुलेशन जोड़ सकता हूं जो परिवर्तन को ट्रिगर करता है और यह काम करता है, लेकिन मैं इसे वू बाइंडिंग के साथ ठीक से करना चाहता हूं।

2
Derek H 3 जिंदा 2020, 19:01

1 उत्तर

सबसे बढ़िया उत्तर

यह आपको सही रास्ते पर ले जाना चाहिए:

  1. अपने data() फ़ंक्शन में एक imageLoading विशेषता रखें।
  2. अपना :src इस प्रकार सेट करें: <img :src="imageLoading ? ./myPlaceholder.png : image.url" />
  3. जब भी यह बदलता है तो लोडिंग छवि को सेट करने के लिए $ अपनी छवि देखें।
watch: {
  'image.url': function() {
    this.imageLoading = true;
  }
  1. इमेज लोड होने पर इमेज लोडिंग को गलत पर सेट करने के लिए अपने img टैग में एक @load हैंडलर जोड़ें: <img :src="imageLoading ? ./myPlaceholder.png : image.url" @load="imageLoading = false" />

@load हैंडलर पर ध्यान दें - बेशर्मी से यह प्रश्न, जो एक उदाहरण से लिंक करता है।

2
Tanner 3 जिंदा 2020, 16:13