Блог

ребята, мне нужно отобразить изображение в поле Datatable Я перепробовал все, но ничего не работает,

на данный момент мой код:

 <q-table
    :data="driverTable.data"
    :columns="driverTable.columns"
    row-key="objectId"
  >
    <template v-slot:no-data="{ icon, message, filter }">
      <div class="full-width row flex-center q-gutter-sm">
        <q-icon size="2em" name="sentiment_dissatisfied" />
        <span>{{ message }}</span>
        <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
      </div>
    </template>

    <template v-slot:top="props">
      <q-btn flat round dense
        @click="props.toggleFullscreen" color="grey-8" class="q-ml-md"
        :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
        :v-bind="props.inFullscreen"
        :title="props.inFullscreen ? 'Minimiser' : 'Plain ecran'"
      />
    </template>
  </q-table>
  

и мой js-код:

 data () {
    return {
      driverTable: {
        columns: [
          {
            name: 'objectId',
            field: row => row.objectId,
            format: val => ''
          },
          {
            name: 'name',
            label: 'Nom complete',
            align: 'left',
            field: row => row.name,
            format: val => `${val}`,
            sortable: true,
            classes: 'ellipsis'
          },
          {
            name: 'carPermit',
            required: true,
            label: 'Permit',
            field: row => row.carPermit, //
            align: 'center',
            format: val => `${'<img height="75%" width="75%" src="'   val   '"/>'}`
          }
        ],
        data: []
      }
    }
  }
  

Я попытался <img> ввести формат поля и указать на нем источник url, но это дает мне только результат при изменении формата

пожалуйста, следуйте этому

 <q-table
        :data="driverTable.data"
        :columns="driverTable.columns"
        row-key="objectId"
    >
        <template v-slot:no-data="{ icon, message, filter }">
            <div class="full-width row flex-center q-gutter-sm">
                <q-icon size="2em" name="sentiment_dissatisfied" />
                <span>{{ message }}</span>
                <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
            </div>
        </template>

        <template v-slot:top="props">
            <q-btn flat round dense
                   @click="props.toggleFullscreen" color="grey-8" class="q-ml-md"
                   :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                   :v-bind="props.inFullscreen"
                   :title="props.inFullscreen ? 'Minimiser' : 'Plain ecran'"
            />
        </template>
        <template v-slot:body-cell-carPermit="props">
            <q-avatar>
                <img :src="props.row.carPermit">
            </q-avatar>
        </template>


    </q-table>
  

и удалите ключи формата и поля из cardPermit

 data () {
return {
  driverTable: {
    columns: [
      {
        name: 'objectId',
        field: row => row.objectId,
        format: val => ''
      },
      {
        name: 'name',
        label: 'Nom complete',
        align: 'left',
        field: row => row.name,
        format: val => `${val}`,
        sortable: true,
        classes: 'ellipsis'
      },
      {
        name: 'carPermit',
        required: true,
        label: 'Permit',
        align: 'center',
      }
    ],
    data: []
  }
}
  

}