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'
}