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

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

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

apenas tente

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

Expandir trecho

— iliketofu
fonte

rápido e fácil, ty

— Sweet Chilly Philly

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

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

— Mostafa Ahmed
fonte

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.

Licensed under cc by-sa 3.0 with attribution required.