157

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

7 Answers 7

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.

1
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`">
2
  • 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" Dec 18, 2018 at 15:29
  • imgPreUrl is a variable, not a function.
    – Blue
    Apr 23, 2019 at 12:27
15

just try

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

2
7

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

if you handel this from dataBase try :

<img :src="baseUrl + 'path/path' + obj.key +'.png'">
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"
    />
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.

1
  • 1
    Nice~ Thank you : )
    – nasangW
    Oct 20, 2021 at 5:44

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.