vuejs本地圖片預覽,怎麼取得圖片src?
元件ImagePreview.vue
<template>
<p class="card text-center" style="width: 16rem;">
<img class="card-img" :src="imgDataUrl" style="height: 16rem;">
<p class="card-footer text-muted">
<input type="file" id="image" name="image" @change="preview($event)">
</p>
</p>
</template>
<script>
export default {
data(){
return {
imgDataUrl: ''
}
},
methods: {
preview(event){
this.imgDataUrl = event.target.files;
}
}
}
</script>
問題:
點擊一張圖片後,圖片無法顯示,在瀏覽器偵錯視窗中顯示src="[object File]"
,要怎麼寫才可以?
preview方法裡面下面兩種寫法都不行。
event.target.files
event.target.files[0]