How to insert image on QTable?

[iamshulz]

I have created a table and followed some dummy data generation from the documentation however I have trouble implementing an image on the QTable as it has not even mention how to put images on the rows and mention <template> so I have just been relying on some tutorials which uses the old version on Qtable.

<q-table
                title="Treats"
                style="height: 470px"
                class="patient-table-sticky-header"
                :rows="rows"
                :columns="columns"
                :loading="loading"
                :filter="filter"
                :separator="separator"
                v-model:selected="selected"
                v-model:pagination="pagination"
                row-key="id"
                binary-state-sort
                selection="single"
                @request="onRequest"
            >
                <template v-slot:top-left>
                    <q-input borderless dense debounce="50" v-model="filter" placeholder="Search">
                        <template v-slot:append>
                            <q-icon name="search" />
                        </template>
                    </q-input>
                </template>

                <template v-slot:body="props">
                    <q-tr :props="props">
                        <q-td v-for="col in props.cols" :key="col.id" :props="props">
                            <span v-if="col.name !='Image'" >
                            {{ col.value }}</span>
                            
                            <q-avatar v-if="col.name =='avatar'" class="shadow-10">
                                    <img :src="props.row.avatar">
                                </q-avatar>
                        </q-td>
                    </q-tr>
                </template>

</q-table>

It is broken

No data displaying and image should popup on the avatar column but If I remove the <template> the table will work however the cell will contain text's instead of image.
Sample rows

{ id: 1, name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, sodium: 87, calcium: '14%', iron: '1%', avatar: 'https://avatars3.githubusercontent.com/u/34883558?s=400&u=09455019882ac53dc69b23df570629fd84d37dd1&v=4' },
  { id: 2, name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: '8%', iron: '1%', avatar: 'https://avatars3.githubusercontent.com/u/34883558?s=400&u=09455019882ac53dc69b23df570629fd84d37dd1&v=4' },
  

----
const columns = [
  { name: 'desc', required: true, label: 'Dessert (100g serving)', align: 'left', field: row => row.name, format: val => `${val}`, sortable: true },
  { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
  { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
  { name: 'carbs', label: 'Carbs (g)', field: 'carbs', sortable: true },
  { name: 'protein', label: 'Protein (g)', field: 'protein', sortable: true },
  { name: 'sodium', label: 'Sodium (mg)', field: 'sodium', sortable: true },
  { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
  { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
  { name: 'avatar', label: 'Avatar', field: 'avatar', sortable: false },
]  

I would like to request on the documentation that they include this type of examples and other else that are useful.

[ontwikkelfabriek]

@jamols09

Please create a codepen.io so we can provide better support.

[nucle]

Hi,
it's quite simple like it is described in the docs.

Here my codepen example:
https://codepen.io/nucle/pen/QWpmjEM

Important is:
body-cell-[field-name-of-column]

e.g.:

my column:
{
name: 'myImageColumn',
label: 'Image',
field: 'image'
}

and template:

        <template v-slot:body-cell-myImageColumn="props">
            <q-td :props="props">
                <div>
                    <img :src="props.row.image">
                </div>
            </q-td>
        </template>

BR

[ontwikkelfabriek]

@nucle

eumm..... In your codepen I can see images in the avatar column just fine( some guy with a screw through his body). I would check your network tab to see what is going on.

[iamshulz]

Hi,
it's quite simple like it is described in the docs.

Here my codepen example:
https://codepen.io/nucle/pen/QWpmjEM

Important is:
body-cell-[field-name-of-column]

e.g.:

my column:
{
name: 'myImageColumn',
label: 'Image',
field: 'image'
}

and template:

        <template v-slot:body-cell-myImageColumn="props">
            <q-td :props="props">
                <div>
                    <img :src="props.row.image">
                </div>
            </q-td>
        </template>

BR

I would like to know where did "v-slot:top-left" is located I can't find it on dev tools