Javascript Vue.js如何在更新前显示图像预览

嗨，我有我的自定义组件，我正在加载图像。我需要显示图像后，我选择图像，然后再上传到服务器上。请问怎么做？我尝试在img标签上使用v-on:change效果，但它不起作用。我的计划是使用test（）函数进行图像预览

<template>
    <div id="insert-component">
        <div id="insert-new" >
            <h2 class="text-md-left">New Category</h2>
            <div class="mt-2 text-left">
                <a href="#" id="img-button" class=" d-flex flex-wrap" v-on:click.stop="loadImage()">
                    <img src="/storage/images/no_image.png" alt="logo" v:on-change="test()">
                    <input type="file" class="d-none" id="load-category-image"  v-on:input="handleFileSelected">
                    <button class="btn btn-dark btn-block" >Pridať obrázok</button>
                </a>
                <small class="text-danger d-none error">Súbor musí byť png, jpg alebo jpeg</small>
            </div>
        </div>
        <button class="btn btn-success btn-block my-2" v-on:click="submit($event)">Pridať kategóriu</button>
    </div>
</template>

新类别
Súbor musíbyťpng，jpg alebo jpeg
普里达·卡泰格罗

导出默认值{
名称：“InsertComponent”，
道具：['updateTableData']，
数据：函数（）{
返回{
类别名称：“”，
类别描述：“，
类别\u img:“/storage/images/no\u image.png”，
文件：空
}
},
方法：{
测试（）{
警报（“测试”）；
},
loadImage（）{
document.getElementById（'load-category-image'）。单击（）；
},
handleFileSelected（事件）{
const acceptedImageTypes=['image/jpg'、'image/jpeg'、'image/png']；
让loadedFile=document.getElementById（'load-category-image'）.files；
if（acceptedImageTypes.includes（loadedFile[0]['type']））
{
this.category_img=“/storage/images/”+loadedFile.name；
this.file=loadedFile；
}
否则{
让$errorsElements=document.getElementsByClassName（'error'）；
对于（let项为$errorsElements）{
item.classList.remove（'d-none'）；
};
category_img=“/storage/images/no_image.png”；
}
},
},
}

您可以使用

URL.createObjectURL（文件[0]）

生成URL

代码笔-

<script>
    export default {
        name: "InsertComponent",
        props: [ 'updateTableData' ],
        data: function () {
            return {
                category_name: "",
                category_description: "",
                category_img:"/storage/images/no_image.png",
                file:null
            }
        },
        methods: {
            test(){
              alert("test");
            },
            loadImage(){
                document.getElementById('load-category-image').click();
            },
            handleFileSelected(event) {
                const acceptedImageTypes = ['image/jpg', 'image/jpeg', 'image/png'];
                let loadedFile = document.getElementById('load-category-image').files;
                if(acceptedImageTypes.includes(loadedFile[0]['type']))
                {
                    this.category_img="/storage/images/"+loadedFile.name;
                    this.file=loadedFile;
                }
                else{
                    let $errorsElements = document.getElementsByClassName('error');
                    for (let item of $errorsElements) {
                        item.classList.remove('d-none');
                    };
                    category_img="/storage/images/no_image.png";
                }
            },
        },
    }
</script>