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

Ry- · Accepted Answer · 2017-08-22 19:13:14Z

302

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, 2017 at 19:13

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Oct 26, 2016 at 12:08

Dan Mindru

6,1244 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexey Over a year ago

"But Vue.js actually supports the full power of JavaScript expressions inside all data bindings": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

Ardhi · Accepted Answer · 2017-07-13 05:55:50Z

58

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, 2017 at 5:55

Ardhi

3,0452 gold badges26 silver badges31 bronze badges

2 Comments

PrestonDocks Over a year ago

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"

Blue Over a year ago

imgPreUrl is a variable, not a function.

iliketofu · Accepted Answer · 2019-04-15 08:21:45Z

15

just try

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

answered Apr 15, 2019 at 8:21

iliketofu

1511 silver badge3 bronze badges

2 Comments

Sweet Chilly Philly Over a year ago

quick and easy, ty

Stormnorm Over a year ago

This is the correct way, as stated in the documentation: nuxtjs.org/docs/2.x/directory-structure/assets#images

Bedram Tamang · Accepted Answer · 2021-11-11 02:51:52Z

9

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

answered Nov 11, 2021 at 2:51

Bedram Tamang

4,51436 silver badges29 bronze badges

Comments

Mostafa Ahmed · Accepted Answer · 2019-12-19 10:42:55Z

5

if you handel this from dataBase try :

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

answered Dec 19, 2019 at 10:42

Mostafa Ahmed

4747 silver badges17 bronze badges

Comments

Andy · Accepted Answer · 2020-10-27 17:03:41Z

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, 2020 at 17:03

Andy

1373 silver badges11 bronze badges

Comments

Eugene · Accepted Answer · 2020-09-29 09:54:24Z

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, 2020 at 9:54

Eugene

3,35723 silver badges25 bronze badges

Collectives™ on Stack Overflow

Vue.js img src concatenate variable and text

7 Answers 7

1 Comment

2 Comments

2 Comments

Method 1

Method 2

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

2 Comments

Method 1

Method 2

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related