Vue.js img src 连接变量和文本

Question

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

Answer 1

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 2

在另一种情况下，我可以使用带有反引号的模板文字 ES6，因此您可以将其设置为：

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

Answer 3

试试吧

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

Answer 4

如果您从数据库中处理此问题，请尝试：

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

Answer 5

Doesn't work:

<div :class="['some-class', someClassNameProp, { `some-class--${specificModifierProp}`: showSomethingSpecificProp }]" >

Better

<div :class="['some-class', someClassNameProp, showSomethingSpecificProp ? specificModifierComputed : '']" >

...

computed: {
  specificModifierComputed() {
    return `some-class--${specificModifierProp}`;
  }
},

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.

Answer 7

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 8

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

Answer 9

Gracias a todos por su aporte a mi me funciono esto:

Donde "user.Imagen" es la variable que definí de acuerdo al usuario para que el avatar pueda cambiar en cada inicio de sesión.

Incrustacion utilizada en Google AppScript

Saludos Cordiales.

 <v-list-item class="px-2"> <v-list-item-avatar> <img v-bind:src="user.Imagen"></v-img> </v-list-item-avatar> </v-list-item>