如何在 Vue.js 中使用“img src"? [英] How can I use 'img src' in Vue.js?

问题描述

我的 Vue.js 模板中有这个:

I have this in my Vue.js template:

<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}}":属性内的插值已被删除.使用 v-bind 或冒号速记反而.例如，代替 ，使用 .

我也使用了 v-bind:src="...，但我得到了无效表达式错误.

I have also use v-bind:src="..., but I 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 a correctly defined image variable.

joke: {
  avatar: 'image.jpg'
}

一个工作演示在这里:http://jsbin.com/pivecunode/1/edit?html,js,output

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