I want to concatenate Vue.js variable with image URL.
What I computed:
imgPreUrl : function() {
if (androidBuild) return "android_asset/www/";
else return "";
}
If I build for android:
<img src="/android_asset/www/img/logo.png">
Else
<img src="img/logo.png">
How can I concatenate the computed variable with the URL?
I tried it:
<img src="{{imgPreUrl}}img/logo.png">
You can't use curlies (moustache tags) in attributes. Use the following to concat data:
<img v-bind:src="imgPreUrl + 'img/logo.png'">
Or the short version:
<img :src="imgPreUrl + 'img/logo.png'">
Read more on dynamic attributes in the Vue docs.
In another case I'm able to use template literal ES6 with backticks, so for yours could be set as:
<img v-bind:src="`${imgPreUrl()}img/logo.png`">
imgPreUrl
is a variable, not a function.
just try
if you handel this from dataBase try :
<img :src="baseUrl + 'path/path' + obj.key +'.png'">
If it helps, I am using the following to get a gravatar image:
<img
:src="`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&d=${this.defaultAvatar(email)}`"
class="rounded-circle"
:width="size"
/>
Following both method is valid.
Method 1
Concatenate with +
sign and wrap string with single/double quotation.
<img :src="imgPreUrl() + 'img/logo.png'">
Method 2
Wrap with backtick `
and wrap variables with ${variable}
. As imgPreUrl
is a method so,
<img :src="`${imgPreUrl()}img/logo.png`">
For me, it said Module did not found and not worked. Finally, I found this solution and worked.
<img v-bind:src="require('@' + baseUrl + 'path/path' + obj.key +'.png')"/>
Needed to add '@' at the beginning of the local path.
Success story sharing