Qimg disappears when width="auto"

holoDennis

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!

Hawkeye64

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

holoDennis

@Hawkeye64 Of course! Thank you!