No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-table image

    Help
    2
    7
    1336
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      Kate last edited by

      Hey there, I have a table, with a description <td> and different images. So now how I can add an image to each <td>? When I add via v-for, the pictures are added to the row, not to column:

      <q-table :data="data" :columns="columns" row-key="name" hide-bottom>
          <template v-slot:body-cell-name="props">
                 <q-td :props="props">
                   <q-badge :label="props.value"></q-badge>
                   <img v-for="(image, key) in images" :src="image.url" :key="key" />
                 </q-td>
            </template>
         </q-table>
      
      ...
      
      export default {
       data() {
         return {
           images: [
             { url: require("../statics/icons/currency-icons/usa.svg")},
             { url: require('../statics/icons/currency-icons/eu.svg')},
             { url: require('../statics/icons/currency-icons/kz.svg')},
             { url: require('../statics/icons/currency-icons/trk.svg')},
             { url: require('../statics/icons/currency-icons/gb.svg')},
             { url: require('../statics/icons/currency-icons/ru.svg')},
             { url: require('../statics/icons/currency-icons/usa.svg')},
             { url: require('../statics/icons/currency-icons/kgz.svg')},
           ],
         }
       }
      }
      
      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by s.molinari

        In your example, you are putting all the images in one cell. Also, with the slot “body-cell-name”, “name” should be the name of a column.

        It’s also sort of hard to tell what you want to do without seeing the full set of data/ full component. Best thing to do is create a codepen as an example we can both work off of.

        Scott

        1 Reply Last reply Reply Quote 0
        • K
          Kate last edited by

          Hello Scott! Thank you for your reply. Sorry about that, here is codepen https://codepen.io/TavitaMenashe/pen/qBbmZBB

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            The pen doesn’t work. Get at least the table showing please.

            Scott

            1 Reply Last reply Reply Quote 0
            • K
              Kate last edited by

              @s-molinari
              https://codepen.io/TavitaMenashe/pen/MWKmyQd

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

                Ok. Is this what you are looking for?

                https://codepen.io/smolinari/pen/wvMdWvR?editors=1010

                Scott

                1 Reply Last reply Reply Quote 0
                • K
                  Kate last edited by

                  @s-molinari Yes, it is working! Thank you so much!

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post