我在将图像渲染至HTML元素时遇到了一些问题。我认为有经验的前端开发人员可能会很快解决这个问题。 我有一个Vuetify组件,允许用户输入个人资料图片:
<v-form>
<v-avatar size="144">
<v-icon hidden ref="default_icon" size="144">account_circle</v-icon>
<img ref="my_img" style="display: none;" :src="my_photo.name">
<v-btn @click="$refs.my_input.click()" class="img_btn" absolute right small fab dark color="pink">
<v-icon dark>add</v-icon>
</v-btn>
<input ref="my_input" hidden type="file" accept="image/*" @change="onFileChange($refs.my_input)">
</v-avatar>
</v-form>
当元素调用onFileChange时,它将HTML元素传递给函数。
onFileChange(event) {
this.my_photo = event.files[0]
console.log(this.my_photo)
this.$refs.default_icon.style.display = "none"
this.$refs.my_img.style.display = "inline"
}
现在这个函数用img标签替换了图标。我想用用户输入的图片填充img标签。this.my_photo是一个文件类型的变量。有人知道怎么做吗? 感谢大家!