如何在 Vue.js 中使用“img src”？ [复制]答案

【问题标题】：How can I use 'img src' in Vue.js? [duplicate]如何在 Vue.js 中使用“img src”？ [复制]
【发布时间】：2018-02-03 11:28:03
【问题描述】：

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

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

它在一个呈现笑话的循环中。其他字段渲染得很好，但是对于图像我在控制台中得到这个错误：

src="/media/avatars/{{joke.avatar}}"：属性内的插值已被删除。使用 v-bind 或冒号速记反而。例如，用代替。

我也使用过v-bind:src="...，但我得到invalid expression错误。

我该如何解决这个问题？

【问题讨论】：

发布您的v-bind:src 尝试
即使它被标记为重复，但这仍然是当您搜索“vuejs image src”时出现在搜索中的那个，但要复制，您必须搜索“如何解决内部插值”属性已被删除......”在我看来没有帮助，关闭这个问题并将其标记为重复根本没有意义。

【解决方案1】：

试试这个：

<img v-bind:src="'/media/avatars/' + joke.avatar" />

不要忘记路径字符串周围的单引号。同样在您的数据中，检查您是否有正确定义的图像变量。

joke: {
  avatar: 'image.jpg'
}

【讨论】：

Vue 2+ & babel/webpack: /media/avatars/${$joke.avatar}" />
最简单的解决方案：使用完整的 src 创建一个变量，然后 <img :src="nameOfVariable">
对我来说完美的解决方案！双引号和单引号对我帮助很大。
stackoverflow.com/questions/37645243/…
不包括 v-bind，它应该仍然可以正常工作，即使用 require('url') 对我有用，如果你设置了一个返回对象数组的数据函数，则图像在本地/host/IMG_20191125_160548.jpg'), }, ....... ] }