[Solved] Should images work in grid-mode tables?

[mboeni]

Hi all

I show images in a table which works fine in the normal table mode. If I set the grid mode though, the URL is displayed instead of the image. Here’s the code:

<div v-if="topGamesGrid === false">
                          <q-table
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPagination"
                            row-key="id"
                          >
                            <template v-slot:body-cell-boxShot="boxShot">
                              <q-td :props="boxShot">
                                <div>
                                  <q-img :src='boxShot.value' basic />
                                </div>
                              </q-td>
                            </template>
                          </q-table>
                        </div>
                        <div v-else>
                          <q-table
                            grid
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPagination"
                            row-key="id"
                          >
                            <template v-slot:body-cell-boxShot="boxShot">
                              <q-td :props="boxShot">
                                <div>
                                  <q-img :src='boxShot.value' basic />
                                </div>
                              </q-td>
                            </template>
                          </q-table>
                        </div>

Any ideas why that is?

Cheers,
Michael

[mboeni]

Just in case anyone else is interested. I was able to solve it like this:

                        <div v-if="topGamesGridMode === false">
                          <q-table
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPagination"
                            row-key="id"
                          >
                            <template v-slot:body-cell-boxShot="boxShot">
                              <q-td :props="boxShot">
                                <div>
                                  <q-img :src='boxShot.value' basic />
                                </div>
                              </q-td>
                            </template>
                          </q-table>
                        </div>
                        <div v-else>
                          <q-table
                            grid
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPaginationGrid"
                            row-key="id"
                          >
                            <template v-slot:item="props">
                              <q-card bordered dark class="q-ma-sm tileBGColor" style="max-width: 300px; min-width: 300px">
                                <div class="q-ma-sm" v-for="col in props.cols" :key="col.id">
                                  <div v-if="col.label === 'Box Shot'">
                                    <q-img :src='col.value' basic />
                                  </div>
                                  <div v-if="col.label === 'Game Name'">
                                    <div class="text-h6">
                                      {{col.value}}
                                    </div>
                                  </div>
                                  <div v-if="col.label === '# of Viewers'">
                                    <div class="row text-h8">
                                      <div class="column col-4">Viewers:</div>
                                      <div class="column">{{col.value}}</div>
                                    </div>
                                  </div>
                                  <div v-if="col.label === '# of Channels'">
                                    <div class="row text-h8">
                                      <div class="column col-4">Channels:</div>
                                      <div class="column">{{col.value}}</div>
                                    </div>
                                  </div>
                                </div>
                              </q-card>
                            </template>
                          </q-table>
                        </div>

Cheers,
Michael