vue.jsでimg srcを使用するには？

Question

私はvue.jsテンプレートでこれを持っている：

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

それはジョークをレンダリングループ内です。 Otehrフィールドが微細化されていますが、画像のために、私は、コンソールにこのエラーが表示されます。

• SRC =「/メディア/アバター/ {{joke.avatar}}」：属性内の補間が削除されました。代わりにv-bindまたはコロンを使用してください 。たとえば、の代わりに、を使用します。

私はまたv-bind:src="...を使用しますが、invalid expressionエラーを取得しています。

どうすればこの問題を解決できますか？

Answer 1

はこれを試してみてください：

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

あなたのパス文字列の周りに単一引用符を忘れないでください。あなたのデータにも の画像変数が正しく定義されていることを確認してください。ここ

joke: { 
    avatar: 'image.jpg' 
} 

作業のデモ：http://jsbin.com/pivecunode/1/edit?html,js,output