DB に写真が存在する場合にその画像を表示し、何もない場合にストック画像を指すことができるように、写真列だけに EL テーブルを使用して v-if v-else を作成する方法を教えてください。
プロフィール写真用の 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
}
],
```
繰り返しますが、DB に写真が存在する場合にその画像を表示し、何もない場合にストック画像を指すことができるように、写真の列だけに EL テーブルを使用して v-if v-else を記述する方法は?
このようなもの....
```
<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 は初めてです。そして、私はそれに腹を立てています。しかし、私もそれで立ち往生しています。どんな助けでも大歓迎です。ありがとうございました。