Vue.js img src concatenate variable and text

Question

I want to concatenate Vue.js variable with image URL.

What I computed:

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


        

Answer 1

if you handel this from dataBase try :

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

just try

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

Answer 6

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.