[Vuejs]-Q-File Element Image Upload Preview not Displaying correctly

by

1👍

✅

Try to remove flex from your classes in q-img wrapper div:

const { ref } = Vue
const app = Vue.createApp({
  setup () {
    let image = ref(null);
    let imageUrl = ref("");
    const previewImage = () => {
      if (image.value) {
        imageUrl.value = URL.createObjectURL(image.value[0]);
      }
    };
    return { image, imageUrl, previewImage }
  }
})

app.use(Quasar)
app.mount('#q-app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <q-file
    filled
    bottom-slots
    v-model="image"
    label="Foto"
    counter
    multiple
    accept=".jpg, image/*"
    @update:model-value="previewImage"
  >
    <template v-slot:prepend>
      <q-icon name="cloud_upload" @click.stop.prevent />
    </template>
    <template v-slot:append>
      <q-icon
        name="close"
        @click.stop.prevent="image = null"
        class="cursor-pointer"
      />
    </template>
  </q-file>

  <div class="mainPhotoContainer col-11 col-md-4 q-pa-md q-mt-md">
    <q-img class="col-12" :src="imageUrl" alt="" />
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.umd.prod.js"></script>

Leave a comment