[解決済み] Vue.jsで'img src'を使用するにはどうしたらいいですか？重複

質問

Vue.jsのテンプレートにこんなのがあります。

<img src="/media/avatars/{{joke.avatar}}" alt="">

これはジョークをレンダリングするループの中にあります。他のフィールドは問題なくレンダリングされますが、画像については、コンソールにこのエラーが表示されます。

• src="/media/avatars/{{joke.avatar}}": 属性内の補間が削除されました。代わりにv-bindかコロンの省略記法 を使用してください。例えば、 , の代わりに .

また、私は v-bind:src="... もありますが 無効な式 というエラーが表示されます。

どうすれば直せますか？

どのように解決するのですか？

これを試してみてください。

<img v-bind:src="'/media/avatars/' + joke.avatar" /> 

パス文字列をシングルクォートで囲むことを忘れないでください。 また、データ内で、画像変数が正しく定義されていることを確認してください。

joke: {
  avatar: 'image.jpg'
}

動作するデモはこちらです。 http://jsbin.com/pivecunode/1/edit?html,js,output