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

score 291 · Accepted Answer · edited Aug 22 '17 at 19:13

291

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.

edited Aug 22 '17 at 19:13

Ry-

218,210
55
464
476

answered Oct 26 '16 at 12:08

Dan Mindru

5,986
4
28
42

"But Vue.js actually supports the full power of JavaScript expressions inside all data bindings": https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions – Alexey Sep 12 '17 at 17:40

score 57 · Answer 2 · answered Jul 13 '17 at 05:55

57

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

answered Jul 13 '17 at 05:55

Ardhi

2,855
1
22
31

5

I have tried this, but it seems that webpack runs before the bindings are processed because my url is outputted to the browser as "@./assets/syndicate_images/34.jpg" – PrestonDocks Dec 18 '18 at 15:29
`imgPreUrl` is a variable, not a function. – Blue Apr 23 '19 at 12:27

score 15 · Answer 3 · answered Apr 15 '19 at 08:21

15

just try

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

answered Apr 15 '19 at 08:21

iliketofu

151
1
3

quick and easy, ty – Sweet Chilly Philly Mar 30 '20 at 00:00
This is the correct way, as stated in the documentation: https://nuxtjs.org/docs/2.x/directory-structure/assets#images – Stormnorm Apr 29 '21 at 17:24

score 7 · Answer 4 · answered Nov 11 '21 at 02:51

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

score 5 · Answer 5 · answered Dec 19 '19 at 10:42

5

if you handel this from dataBase try :

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

answered Dec 19 '19 at 10:42

Mostafa Ahmed

474
7
16

score 2 · Answer 6 · answered Oct 27 '20 at 17:03

2

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

answered Oct 27 '20 at 17:03

Andy

59
2
11

score 1 · Answer 7 · answered Sep 29 '20 at 09:54

1

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.

answered Sep 29 '20 at 09:54

Ares

2,504
19
19

1

Nice~ Thank you : ) – nasangW Oct 20 '21 at 05:44

Vue.js img src concatenate variable and text

7 Answers7

Method 1

Method 2

Linked