Vuejs：如何在子组件中显示上传的图像

Question

I use v-file-input of vutify to upload the image so I have:

<v-file-input
   label="Image"
    filled
   accept="image/png, image/jpeg, image/bmp"
   prepend-icon="mdi-camera"
   v-model="image"
   ></v-file-input>

Where I console.log the v-model image I get a File object like That:

File {name: "img.png", lastModified: 1588256009000, lastModifiedDate: Thu Apr 30 2020, webkitRelativePath: "", size: 53258, …}
name: "img.png"
lastModified: 1588256008000
lastModifiedDate: Thu Apr {}
webkitRelativePath: ""
size: 53259
type: "image/png"
....

So how can I display it into the component or another child component from this Object?

Answer 1

Create a computed property of imageUrl that returns the value of URL.createObjectURL(image) and then you can use imageUrl in the same component or pass it off as a prop to a child component :

computed: {
   imageUrl() {
       return this.image ? URL.createObjectURL(this.image) : "";
   }
}

Use the imageUrl as:

<img :src="imageUrl" />