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!