How can I bind image url's to Framework7 list-item "media" attribute with Vue.js?

Question

I am using Framework7's Vue plugin to display a list of tweets. The tweets are stored within an array in data():

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

The markup (Jade) looks like this:

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

This works very well and will print me a list of all tweets in the array to the GUI. The f7-list component from Framework7 now also allows to add an image like this:

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

Each image is stored in the tweets array like this:

tweet.user.profile_image_url

Normally, I would do something like this to add the image:

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

Unfortunately, this does not seem to be possible anymore since I get this error message from Vue in console:

template syntax error media="<img src="{{tweet.user.profile_image_url}}">": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

How can I embed the image url into the media attribute using v-bind or :media="..." syntax here? All I can think of is binding the URL directly:

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

But this won't work because I need to add the <img> tag somehow.

Answer 1

The solution was to use a filter:

Jade markup

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

Vue component script

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