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

    Qimg disappears when width="auto"

    Help
    2
    3
    21
    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.
    • H
      holoDennis last edited by

      Hey guys, I put a QImg in a custom component and would like to use that component to display images in my app. But well, I just don’t get the sizing correct. I can set the height to auto and resize the image by relative width, but the image disappears when I’m trying the other way round. As soon as I set the width to auto the image disappears. Why is that? I would like to set the height to 100% of the outer toolbar and let the width be calculated by the set resolution, which is at 16:9.

      // Img16x9.vue
      
      <template>
        <q-img
          :ratio="16/9"
          :alt="alt"
          :src="src"
          placeholder-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg=="
          :width="width"
          :height="height"
        />
      </template>
      
      <script>
      export default {
        name: 'Img16x9',
        props: {
          alt: {
            type: String,
            default() {
              return this.$t('defaultAlt')
            }
          },
          src: {
            type: String,
            default: '',
            required: true
          },
          width: {
            type: String,
            default: '100%'
          },
          height: {
            type: String,
            default: 'auto'
          }
        },
        i18n: {
          messages: {
            de: {
              defaultAlt: 'Bild'
            }
          }
        }
      }
      </script>
      
      
      //parent view
      [...]
      <q-footer bordered class="bg-dark text-white">
            <!-- Active Station Bar -->
            <q-toolbar v-if="activeStation" id="active-station-bar">
              <img-16x9
                :src="activeStation.image"
                width="auto"
                height="60px" // tried this and 100% when the toolbar had 60px set
              />
            </q-toolbar>
            [...]
          </q-footer>
        </q-layout>
      [...]
      

      THANKS! 🙂

      1 Reply Last reply Reply Quote 0
      • Hawkeye64
        Hawkeye64 last edited by

        @holoDennis QImg uses background-image, so width="auto" won’t work. Instead, load the image and get the naturalWidth and naturalHeight to set width and height of QImg.

        H 1 Reply Last reply Reply Quote 0
        • H
          holoDennis @Hawkeye64 last edited by

          @Hawkeye64 Of course! Thank you! 🙂

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