Vue.js img src concatenar variable y texto

105

Quiero concatenar la variable Vue.js con la URL de la imagen.

Lo que calculé:

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

Si construyo para Android:

<img src="/android_asset/www/img/logo.png">

Más

<img src="img/logo.png">

¿Cómo puedo concatenar la variable calculada con la URL?

Lo intenté:

<img src="{{imgPreUrl}}img/logo.png">
javascript vue.js vuejs2 Ketom
fuente

Respuestas:

205

No puede usar curlies (etiquetas de bigote) en atributos. Utilice lo siguiente para concatizar datos:

<img v-bind:src="imgPreUrl + 'img/logo.png'">

O la versión corta:

<img :src="imgPreUrl + 'img/logo.png'">

Lea más sobre atributos dinámicos en los documentos de Vue .

Dan Mindru
fuente
"Pero Vue.js realmente admite todo el poder de las expresiones JavaScript dentro de todos los enlaces de datos": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
Alexey
40

En otro caso, puedo usar la plantilla literal ES6 con comillas invertidas, por lo que la suya podría establecerse como:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
Ardhi
fuente
4
He intentado esto, pero parece que el paquete web se ejecuta antes de que se procesen los enlaces porque mi URL se envía al navegador como "@. / Assets / syndicate_images / 34.jpg"
PrestonDocks
imgPreUrles una variable, no una función.
Adiós StackExchange
6

sólo inténtalo 

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

iliketofu
fuente
rápido y fácil, ty
Sweet Chilly Philly
1

si maneja esto desde la base de datos, intente:

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