Vue.js img src concatena variabile e testo

106

Voglio concatenare la variabile Vue.js con l'URL dell'immagine.

Cosa ho calcolato:

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

Se creo per Android:

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

Altro

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

Come posso concatenare la variabile calcolata con l'URL?

L'ho provato:

<img src="{{imgPreUrl}}img/logo.png">

javascript vue.js vuejs2

— ketom
fonte

Risposte:

206

Non puoi usare i ricci (tag baffi) negli attributi. Utilizzare quanto segue per concatenare i dati:

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

O la versione breve:

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

Ulteriori informazioni sugli attributi dinamici nei documenti di Vue .

— Dan Mindru
fonte

"Ma Vue.js supporta effettivamente tutta la potenza delle espressioni JavaScript all'interno di tutte le associazioni di dati": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

— Alexey

In un altro caso sono in grado di utilizzare il modello letterale ES6 con i backtick, quindi per il tuo potrebbe essere impostato come:

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

— Ardhi
fonte

Ho provato questo, ma sembra che webpack venga eseguito prima che i collegamenti vengano elaborati perché il mio URL viene inviato al browser come "@. / Assets / syndicate_images / 34.jpg"

— PrestonDocks

imgPreUrlè una variabile, non una funzione.

— Arrivederci StackExchange

prova

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

Espandi lo snippet

— iliketofu
fonte

veloce e facile, ty

— Sweet Chilly Philly il

se lo gestisci da dataBase prova:

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

— Mostafa Ahmed
fonte

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.

Licensed under cc by-sa 3.0 with attribution required.