How to render image in vue-table

[benzsamator]

It possible to render image in row ?

Please advice me. Thank a lot.

[cristijora]

You can easily achieve this with scoped slots http://jsfiddle.net/z11fe07p/2029/

 <template slot="image" scope="props">
   <img src="https://cdn.auth0.com/blog/vuejs/vue-logo.png" alt="" width="50" height="50">
 </template>

fields: ['__slot:image']

In a real scenario you would have the image links in the json response from the server and you would reference the image something like this :src="props.rowData.imageLink"

[benzsamator]

@cristijora Thanks for your answer, It works !!

[paladosss]

@cristijora But how to render if image link inside row???

Where could i get this link on photo???

     <template slot="image" scope="props">
        <div class="img-circle img-circle--size" v-bind:style="{backgroundImage: 'url(' + 'THERE IS URL OF PHOTO' + ')', backgroundSize: 'cover', backgroundPosition: 'center' }"></div>
      </template>

[cristijora]

@paladosss Go once again through https://vuejs.org/v2/guide/components.html#Scoped-Slots so you can understand better. In your case:

<template slot="image" scope="props">
        <div class="img-circle img-circle--size" v-bind:style="{backgroundImage: `url(${props.rowData.photo})`, backgroundSize: 'cover', backgroundPosition: 'center' }"></div>
      </template>

[paladosss]

@cristijora Thank you very much! <3

[Ajmal-Hossain]

what if the images are from database?

[shakirayoub123]

i tried but i am getting only url but i want to display image ???