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
    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'
    //parent view
    <q-footer bordered class="bg-dark text-white">
          <!-- Active Station Bar -->
          <q-toolbar v-if="activeStation" id="active-station-bar">
              height="60px" // tried this and 100% when the toolbar had 60px set

    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