如何在vue.js中使用img src？

Question

我在我的vue.js模板中有这个:

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

它在一个渲染笑话的循环中.Otehr字段呈现正常,但对于图像,我在控制台中收到此错误:

• src ="/ media/avatars/{{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