2016-10-26 23 views
20

Vue変数をimage urlに連結したい。 どういう意味ですか?Vue.js img src変数とテキストを連結する

が計算:

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

私はアンドロイドのために構築する場合:私は、URLで計算された変数を連結するにはどうすればよい

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

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

?あなたは、属性でカーリー(口ひげタグ)を使用することはできません

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

おかげ

+2

そここんにちは!私の答えが役に立つと分かったら、[同意してください](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) –

答えて

41

: 私はそれを試してみました。

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

またはショートバージョン:CONCATするには、以下のデータを使用し

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

読むよりVue docsで動的属性に。私はバッククォートでテンプレートリテラルES6を使用することができるよ別の場合には

+0

"しかしVue.jsは実際にフルパワーをサポートしていますすべてのデータバインディング内のJavaScript式の使用」:https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions – Alexey

6

、 あなたのように設定することができために:

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