Qimg disappears when width="auto"



  • 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! 🙂



  • @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.



  • @Hawkeye64 Of course! Thank you! 🙂


Log in to reply