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

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

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

sólo inténtalo

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

Expandir fragmento

— iliketofu
fuente

rápido y fácil, ty

— Sweet Chilly Philly

si maneja esto desde la base de datos, intente:

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

— Mostafa Ahmed
fuente

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.

Licensed under cc by-sa 3.0 with attribution required.