如何在vue.js中使用img src？ [英] How to use img src in vue.js?

问题描述

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

I have this in my vue.js template:

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

它在一个渲染笑话的循环中。 Otehr字段呈现正常，但对于图像我在控制台中出现此错误：

It is inside a loop that renders jokes. Otehr fields are rendered fine, but for the image I get this error in the console:

• src = /media/avatars/{{joke.avatar}}：已删除内部属性内插。请改用v-bind或冒号简写
  。例如，代替，使用。

我还使用 v -bind：src =... 但是得到无效表达式错误。

I have also use v-bind:src="... but get invalid expression error.

我该如何解决这个问题？

How can I fix 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 correctly defined image variable.

joke: {
  avatar: 'image.jpg'
}

这里的工作演示： http：/ /jsbin.com/pivecunode/1/edit?html,js,output

这篇关于如何在vue.js中使用img src？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！