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