Vue.js img src เชื่อมต่อตัวแปรและข้อความ

ฉันต้องการเชื่อมตัวแปร Vue.js กับ URL รูปภาพ

สิ่งที่ฉันคำนวณ:

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">

คุณไม่สามารถใช้ curlies (แท็กหนวด) ในแอตทริบิวต์ ใช้สิ่งต่อไปนี้เพื่อต่อข้อมูล:

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

หรือเวอร์ชันสั้น:

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

อ่านเพิ่มเติมเกี่ยวกับคุณลักษณะแบบไดนามิกในเอกสาร Vue

ในอีกกรณีหนึ่งฉันสามารถใช้ template literal ES6 กับ backticks ได้ดังนั้นสำหรับคุณสามารถตั้งค่าเป็น:

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

เพียงแค่พยายามที่

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

หากคุณจัดการสิ่งนี้จาก dataBase ให้ลอง:

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

สำหรับฉันมันบอกว่าไม่พบโมดูลและไม่ทำงาน ในที่สุดฉันก็พบวิธีแก้ปัญหานี้และได้ผล

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

จำเป็นต้องเพิ่ม "@" ที่จุดเริ่มต้นของเส้นทางท้องถิ่น

ถ้าช่วยได้ฉันกำลังใช้สิ่งต่อไปนี้เพื่อรับภาพกราวาตาร์:

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