처음 이미지 업로드 기능을 구현하려고 하는데 이미지 미리보기가 잘 표시되지 않습니다.다른 투고나 스레드를 둘러보았지만, 실장 방법은 나에게 맞지 않는 것 같습니다.
지금까지 제가 알아낸 건 다음과 같습니다.
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"
class="cursor-pointer"
/>
</template>
</q-file>
<div class="mainPhotoContainer flex col-11 col-md-4 q-pa-md q-mt-md">
<q-img class="col-12" :src="imageUrl" alt="" />
</div>
스크립트:
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);
} };
blob: 가 붙은 로컬 URL 문자열을 수신하고 있기 때문에 이미지 요소의 :src에서 사용할 수 없습니다.아무것도 표시되지 않습니다.
제가 뭘 잘못하고 있는 거죠?