Vue.js img src পরিবর্তনশীল এবং পাঠ্যকে সংযুক্ত করে

Question

আমি চিত্র URL এর সাথে Vue.js ভেরিয়েবলকে সামঞ্জস্য করতে চাই।

আমি যা গণনা করেছি:

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

যদি আমি অ্যান্ড্রয়েডের জন্য তৈরি করি:

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

অন্যথায়

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

আমি ইউআরএল দিয়ে গণিত ভেরিয়েবলকে কীভাবে সংযুক্ত করতে পারি?

আমি এটা চেষ্টা করেছি:

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

Answer 1

আপনি গুণগুলিতে কারিগুলি (গোঁফ ট্যাগ) ব্যবহার করতে পারবেন না। নিম্নলিখিত তথ্য ব্যবহারের জন্য নিম্নলিখিত ব্যবহার করুন:

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

বা সংক্ষিপ্ত সংস্করণ:

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

ভ্যু ডক্সে গতিশীল বৈশিষ্ট্যগুলির বিষয়ে আরও পড়ুন ।

Comments

"তবে ভ্যু.জেএস প্রকৃতপক্ষে সমস্ত ডেটা বাইন্ডিংয়ের ভিতরে জাভাস্ক্রিপ্ট এক্সপ্রেশনগুলির সম্পূর্ণ শক্তিকে সমর্থন করে": vuejs.org/v2/guide/syntax.html# ব্যবহার-

— আলেক্সি

Answer 2

অন্য ক্ষেত্রে আমি ব্যাকটিক্স সহ টেম্পলেট আক্ষরিক ES6 ব্যবহার করতে সক্ষম হলাম, যাতে আপনার জন্য এটি সেট করা যেতে পারে:

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

Comments

আমি এটি চেষ্টা করে দেখেছি তবে মনে হচ্ছে বাইন্ডিংগুলি প্রক্রিয়া করার আগেই ওয়েবপ্যাকটি চলবে কারণ আমার ইউআরএলটিকে "@। / সম্পদ / সিন্ডিকেট_আইমেজস / 34.jpg" হিসাবে ব্রাউজারে আউটপুট করা হয়েছে

— প্রেস্টনডকস

imgPreUrlএকটি পরিবর্তনশীল, না একটি ফাংশন।

— বিদায় স্ট্যাক এক্সচেঞ্জ

Answer 3

ঠিক করার চেষ্টা করুন

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

Comments

দ্রুত এবং সহজ, টাই

— মিষ্টি চিলি ফিলি

Answer 4

আপনি যদি ডেটাবেস থেকে এটি হ্যান্ডেল করে দেখুন:

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

Answer 5

আমার জন্য, এটি বলেছিল যে মডিউলটি খুঁজে পায় না এবং কাজ করে নি। অবশেষে, আমি এই সমাধানটি খুঁজে পেয়েছি এবং কাজ করেছি।

<img v-bind:src="require('@' + baseUrl + 'path/path' + obj.key +'.png')"/>

স্থানীয় পথের শুরুতে '@' যুক্ত করা দরকার।

Answer 6

এটি যদি সহায়তা করে তবে আমি গ্র্যাভাতার চিত্র পেতে নিম্নলিখিত ব্যবহার করছি:

<img
        :src="`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&d=${this.defaultAvatar(email)}`"
        class="rounded-circle"
        :width="size"
    />