Vue.js img src concatenar variável e texto

106

Quero concatenar a variável Vue.js com o URL da imagem.

O que eu calculei:

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

Se eu construir para Android:

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

Outro

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

Como posso concatenar a variável computada com a URL?

Eu tentei:

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

Respostas:

206

Você não pode usar curlies (marcas de bigode) em atributos. Use o seguinte para concatenar os dados:

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

Ou a versão curta:

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

Leia mais sobre atributos dinâmicos nos documentos do Vue .

Dan Mindru
fonte
"Mas Vue.js realmente suporta todo o poder das expressões JavaScript dentro de todas as ligações de dados": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
Alexey
40

Em outro caso, posso usar o modelo literal ES6 com crases, então para o seu poderia ser definido como:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
Ardhi
fonte
4
Eu tentei isso, mas parece que o webpack é executado antes que as ligações sejam processadas porque meu url é enviado ao navegador como "@. / Assets / syndicate_images / 34.jpg"
PrestonDocks
imgPreUrlé uma variável, não uma função.
Adeus StackExchange
6

apenas tente 

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

iliketofu
fonte
rápido e fácil, ty
Sweet Chilly Philly
1

se você manipular isso do banco de dados, tente:

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