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



  • 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



  • 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


Log in to reply