how to display image into vue js Datatable

Question

guys I need to display an image into the field of Datatable I've tried everything but nothing works,

at that moment my code is:

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

and my js code:

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: []
      }
    }
  }

I've tried <img> into field format and bild on it the url source but it gives me just the balise on stiring format

Waqar Hassan · Accepted Answer · 2020-10-27 11:46:47Z

please follow this

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

and remove format and field keys from 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: []
  }
}

}

Collectives™ on Stack Overflow

how to display image into vue js Datatable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related