我如何使用'img src'在Vue.js?[重复]

Question

我的Vue.js模板中有以下内容：

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

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

• src=“/media/avatars/{{joke.avatar}}”：属性内部的插值已被删除。改用v-bind或冒号速记。例如，使用而不是

我还使用了v-bind:src=“…，但我得到了无效的表达式错误。

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

Answer 1

试试这个：

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

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

joke: {
  avatar: 'image.jpg'
}

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