如何在 Vue.js 中使用“img src”？ [复制]

我的 Vue.js 模板中有这个：

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

它位于一个呈现笑话的循环内。其他字段渲染得很好，但对于图像，我在控制台中收到此错误：

• src="/media/avatars/{{joke.avatar}}"：属性内的插值已被删除。使用 v-bind 或冒号简写 反而。例如，使用 代替 。

我也用过v-bind:src="...，但我得到无效的表达 error.

我怎样才能解决这个问题？

尝试这个：

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

不要忘记路径字符串周围的单引号。 另外，在您的数据中，检查您是否有正确定义的图像变量。

joke: {
  avatar: 'image.jpg'
}

一个工作演示在这里：http://jsbin.com/pivecunode/1/edit?html,js,输出 http://jsbin.com/pivecunode/1/edit?html,js,output