为什么存在元素UI，或者我如何为我的配置文件图像列创建v-if-v-else

Question

如何使用EL表为我的照片列编写一个v-if-v-else，以便当DB中存在照片时，我可以看到该图像，而当没有照片时，可以指向我的股票图像？

我有一个EL表为我的个人资料图片生成的列。然而，有些物品没有图片。。。我在包含占位符图像的子文件夹中有一个默认图像。

如何使用EL表为我的照片列编写一个v-if-v-else？

(顺便说一句：如果这是基本的HTML，我现在已经完成了。但这个代码库使用了一个名为Element UI的HTML包装库(。

这是有问题的表列：

<el-table-column v-for="column in tableColumns"
:key="column.label"
:min-width="column.minWidth"
:prop="column.prop"
:label="column.label">
</el-table-column>

和tableColumns被提供这些值：

tableColumns: [
{
prop: 'photo',
label: 'Pic',
minWidth: 100
},
{
prop: 'name',
label: 'Name',
minWidth: 200
},
{
prop: 'gender',
label: 'Gender',
minWidth: 250
},
{
prop: 'age',
label: 'Age',
minWidth: 100
},
{
prop: 'cat_type',
label: 'Type',
minWidth: 120
}
],

同样，如何使用EL表为我的照片列编写一个v-if-v-else，以便当DB中存在照片时，我可以看到该图像，当没有照片时，可以指向我的库存图像？

类似这样的东西：

<template slot-scope="props">
<a v-tooltip.top-center="'Like'" class="btn-info btn-simple btn-link" @click="handleLike(props.$index, props.row)">
<!--TODO: small profile pic-->
<div class="col-md-2 img-container photo-thumb-sm" v-if="props.row.photo !== null">
<img :src="props.row.photo" alt="thumb" class="rounded-circle img-fluid max-width: 100%;height: auto;">
</div>
<div class="col-md-2 img-container photo-thumb-sm" v-else>
<img src="/static/img/bastet.png" alt="bastet">
</div>
</a>
</template>

我是Element UI的新手，我一直在使用它。

Answer 1

我认为这不是Element UI的错误，也许你可以检查props.row.photo！==空，真的空吗？另一种方法是，检查src="/static/img/bastet.png"的真实路径？