Javascript 如何在 vue.js 中使用 img src？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45880956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use img src in vue.js?
提问by Karlom
I have this in my vue.js template:
我的 vue.js 模板中有这个：
<img src="/media/avatars/{{joke.avatar}}" alt="">
It is inside a loop that renders jokes. Other fields are rendered fine, but for the image I get this error in the console:
它位于呈现笑话的循环中。其他字段呈现良好，但对于图像，我在控制台中收到此错误：
- src="/media/avatars/{{joke.avatar}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
- src="/media/avatars/{{joke.avatar}}": 属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，代替 ，使用 。
I have also use v-bind:src="...but get invalid expressionerror.
我也使用过，v-bind:src="...但invalid expression出现错误。
How can I fix this?
我怎样才能解决这个问题？
回答by Badis Merabet
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 correctly defined image variable.
不要忘记路径字符串周围的单引号。同样在您的数据检查中，您已经正确定义了图像变量。
joke: {
avatar: 'image.jpg'
}
A working demo here: http://jsbin.com/pivecunode/1/edit?html,js,output
这里有一个工作演示：http: //jsbin.com/pivecunode/1/edit?html,js,output
