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

我使用vutify的v-file-input上传图像，因此我有：

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

---

那么，如何将其显示到组件或来自此对象的另一个子组件中呢？

创建一个

imageUrl

的计算属性，该属性返回

URL.createObjectURL（image）

的值，然后您可以在同一组件中使用

imageUrl

，或者将其作为道具传递给子组件

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

将

imageUrl

用作：

<img :src="imageUrl" />

<img :src="imageUrl" />