![](/img/trans.png)
[英]How to display an <img> in Vue.js only if the image url exists?
[英]how to display image into vue js 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: []
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.