web-dev-qa-db-ja.com

Vue.js img src変数とテキストを連結する

Vue.js変数と画像のURLを連結したい。

私が計算したもの：

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

Android用にビルドした場合：

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

Else

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

計算された変数をURLと連結するにはどうすればいいですか。

私はそれを試してみました：

<img src="{{imgPreUrl}}img/logo.png">
javascriptvue.jsvuejs2
72
ketom

属性にはカレー（口ひげタグ）は使用できません。データを連結するには、以下を使用します。

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

またはショートバージョン：

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

動的属性についての詳細は Vue docs をご覧ください。

144
Dan Mindru

別のケースでは、テンプレートリテラルES6をバッククォートと一緒に使用することができます。

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

ちょうど試して

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

動作しません：

<div :class="['some-class', someClassNameProp, { `some-class--${specificModifierProp}`: showSomethingSpecificProp }]" >

良い

<div :class="['some-class', someClassNameProp, showSomethingSpecificProp ? specificModifierComputed : '']" >

...

computed: {
  specificModifierComputed() {
    return `some-class--${specificModifierProp}`;
  }
},
0
ness-EE