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

i using framework7's vue plugin display list of tweets. tweets stored within array in data():

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

the markup (jade) looks this:

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

this works , print me list of tweets in array gui. f7-list component framework7 allows add image this:

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

each image stored in tweets array this:

tweet.user.profile_image_url 

normally, add image:

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

unfortunately, not seem possible anymore since error message vue in console:

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

how can embed image url media attribute using v-bind or :media="..." syntax here? can think of binding url directly:

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

but won't work because need add <img> tag somehow.

the solution use 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) + '">';       }   }, }