在类星体中我的 table 列中插入图像

Question

如何在 table 的一行中插入图像？我试图通过列将 v-if 放入我的循环中，但我做不对。我对类星体很陌生，所以我可能会混淆事情。我的想法是使用 v-if 检查列名是否为 'Image' 插入图像。并且仅在该列中

我的列是姓名、年龄和形象

这是我的代码：

    <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 1

您可以使用 props 变量代替个人资料图片 URL。

<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>

你可以参考下面的codepen

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

在类星体中我的 table 列中插入图像

Insert a image in on column in my table in quasar

javascript

vue.js

quasar