如何在 Vue.js 中使用‘ img src’?

在我的 Vue.js 模板里有这个:

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

这是在一个循环,提供笑话。其他字段呈现得很好,但是对于图像,我在控制台中得到了这个错误:

  • Src = “/media/avatars/{{ joke.atar }}”: 属性内部的插值已被删除。请使用 v-bind 或冒号速记 例如,使用。

我也使用了 v-bind:src="...,但是我得到了 无效的表达方式错误。

我该怎么补救?

268623 次浏览

Try this:

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

Don't forget single quote around your path string. Also in your data, check you have a correctly defined image variable.

joke: {
avatar: 'image.jpg'
}

A working demo is here: http://jsbin.com/pivecunode/1/edit?html,js,output