Vue.js img src संक्षिप्त नाम चर और पाठ

Question

मैं छवि URL के साथ Vue.js चर को बदलना चाहता हूं।

मैंने क्या गणना की:

imgPreUrl : function() {
    if (androidBuild) return "android_asset/www/";
    else return "";
}

अगर मैं Android के लिए निर्माण करूं:

<img src="/android_asset/www/img/logo.png">

अन्य

<img src="img/logo.png">

मैं URL के साथ गणना किए गए चर को कैसे संक्षिप्त कर सकता हूं?

मैं इसे करने की कोशिश की:

<img src="{{imgPreUrl}}img/logo.png">

Answer 1

आप विशेषताओं में curlies (मूंछें टैग) का उपयोग नहीं कर सकते। निम्नलिखित डेटा का उपयोग करें:

<img v-bind:src="imgPreUrl + 'img/logo.png'">

या लघु संस्करण:

<img :src="imgPreUrl + 'img/logo.png'">

Vue डॉक्स में डायनामिक विशेषताओं पर अधिक पढ़ें ।

Comments

"लेकिन Vue.js वास्तव में सभी डेटा बाइंडिंग के अंदर जावास्क्रिप्ट एक्सप्रेशन की पूरी शक्ति का समर्थन करता है": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

— एलेक्सी

Answer 2

एक अन्य मामले में मैं बैकलैक्स के साथ टेम्प्लेट शाब्दिक ES6 का उपयोग करने में सक्षम हूं, इसलिए आपके लिए इस प्रकार सेट किया जा सकता है:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">

Comments

मैंने यह कोशिश की है, लेकिन ऐसा लगता है कि बाइंडिंग के संसाधित होने से पहले वेबपैक चलता है क्योंकि मेरे url को "@ ./ आस्तियों / सिंडिकेट_इमेज / 34.jpg" के रूप में

— आउटपुट किया गया है

imgPreUrlएक चर है, एक फ़ंक्शन नहीं है।

— गुडबाय स्टैकएक्सचेंज

Answer 3

कोशिश करो

<img :src="require(`${imgPreUrl}img/logo.png`)">

Comments

त्वरित और आसान, ty

— मीठी मिर्ची फिल

Answer 4

यदि आप डेटाबेस से इसे संभालते हैं तो कोशिश करें:

<img :src="baseUrl + 'path/path' + obj.key +'.png'">