Insert a image in on column in my table in quasar

How can I insert an image on one row of my table? I have tried to put v-if in my loop through the columns but I cannot get it right. I am pretty new to quasar so I might confuse things. My idea was to use the v-if for checking if the column name is ‘Image’ insert an image. And only in that column

My columns are Name, Age and Image

Here is my code:

    <template v-slot:body="props">
      <div class="row-spacing"></div>
      <q-tr
        :props="props"
        :class="tableFormat(props.row)"
        @click="onRowClick($event, props.row)"
      >
        <q-td
          class="td-my"
          v-for="col in props.cols"
          :key="col.name"
          :props="props"
          >{{ col.value }}
          <div v-if="col.name === 'Image'">
            <img class="profile-img" :src="profileimg[0].url" />
          </div>
        </q-td>
      </q-tr>
    </template>

Answer

Instead of profile image URL, you can use the props variable.

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

You can refer the following codepen.

codepen – https://codepen.io/Pratik__007/pen/bGwpyyo

Advertisement

Answer