如何在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