Q-File Element Image Upload Preview not Displaying correctly-CodePudding

I am attempting to implement an image upload function for the first time and I am having trouble displaying the preview of the image. As much as I have looked around other posts and threads, the way its being implemented does not appear to work for me.

This is what I have so far:

HTML:

<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"
          
        />
      </template>
    </q-file>

<div >
      <q-img  :src="imageUrl" alt="" />
    </div>

SCRIPT:

let image = ref(null);
let imageUrl = ref("");

const previewImage = () => {
  console.log("handlePreview is triggered");
  if (image.value) {
    console.log(image.value[0].name);
    imageUrl.value = URL.createObjectURL(image.value[0]);
    console.log(imageUrl.value);
  }
};

I am receiving a string that is a local URL prefixed by blob:, so I cannot actually use that in the :src for the image element, it will not display anything.

What part am I doing wrong?

CodePudding user response：

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/[email protected]/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"
        
      />
    </template>
  </q-file>

  <div >
    <q-img  :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/[email protected]/dist/quasar.umd.prod.js"></script>