如何通过Vue.js将图像URL绑定到Framework7列表项“媒体”属性？

Question

我正在使用Framework7的Vue插件显示鸣叫列表。 这些推文存储在data（）的数组中：

data () {
  return {
    tweets : []
  }
}

标记（Jade）如下所示：

f7-list(media-list='', v-for='tweet in tweets')
  f7-list-item(:title='tweet.text')

这非常有效，并且可以将阵列中所有推文的列表打印到GUI。 Framework7的f7-list组件现在还允许添加如下图像：

f7-list-item(media="<img src='image.jpg'>")

每个图像都存储在tweets数组中，如下所示：

tweet.user.profile_image_url

通常，我会像这样添加图像：

f7-list-item(media="<img src='{{tweet.user.profile_image_url}}'>")

不幸的是，由于我在控制台中从Vue收到以下错误消息，因此似乎不再可行：

模板语法错误media =“ <img src =” {{tweet.user.profile_image_url}}“>”：属性内部的插值已删除。 请改用v-bind或冒号速记。 例如，使用<div：id =“ val”>代替<div id =“ {{val}}”>。

如何在此处使用v-bind或：media =“ ...”语法将图像URL嵌入到media属性中？ 我能想到的就是直接绑定URL：

f7-list-item(:media='tweet.user.profile_image_url')

但这是行不通的，因为我需要以某种方式添加<img>标记。

Answer 1

解决方案是使用过滤器：

翡翠标记

f7-list-item(:media='tweet | imgFilter')

Vue组件脚本

export default {
  name: 'app',
  data () {
    return {
      tweets : []
    }
  }
  filters : {
      imgFilter : function (tweet) {
          return '<img src="' + filters.imgUrlFilter(tweet) + '">';
      }
  },
}