Javascript 如何在使用vue.js提交表单之前显示图像预览？

我制作了一个vue表单，但无法使用我的表单预览他们要提交到表单的图像

刷新页面后，我可以看到图像，但上传时预览链接被破坏。 有一个删除图像的选项，该选项起作用，但现在的目标是显示图像预览

                   <div class="image-block">
                            <div @click="selectImage('initial-image')">
                                <img class="img-icon"
                                     v-if="imageName === null">
                                <div :class="{'error' : errors.length > 0}" class="text-center"
                                     v-if="imageName === null">
                                    Select an image to upload
                                </div>
                            </div>
                            <div class="image-preview" v-if="imageName !== null">
                                <div class="remove-image" @click="removeImage"><i
                                    class="fa fa-remove"></i>
                                </div>
                                <img v-bind:src="'/images/json-ld/images/' + imageName" class="growth-image"
                                     @click="selectImage('initial-image')">
                            </div>
                        </div>
                        <validation-provider name="image" v-slot="{ validate, errors }">
                            <input type="file" @change="validate" name="image" accept="image/*"
                                   class="hidden"
                                   v-on:change="showFilePreview">
                            <span class="validation-error form-span">{{ errors[0] }}</span>
                        </validation-provider>

---

我怎样才能做到这一点呢？

既然您在

vm.image

中保存了

base64

数据，那么您可以将其放入

src

中，如下所示：

<img :src="image"/>

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
     this.image = reader.result;
};

---

我认为你可以取代：

<img v-bind:src="'/images/json-ld/images/' + imageName" .. />

#app{padding:10px；}
#预览图像{最大宽度：100%；最大高度：150px；边距顶部：10px；}

---

谢谢您的时间和回答

但我找到了解决这个问题的办法

我必须在挂载上添加完整图像的路径

    mount() {
        axios.get('/app/json-ld/store-info')
        .then(res => {
        let data = res.data;

        this.imageName = data.store.image ? '/images/json-ld/images/' + 
    }

并正确定义src属性，如下所示：

 <img v-bind:src="imageName" @click="selectImage('initial-image')">

    mount() {
        axios.get('/app/json-ld/store-info')
        .then(res => {
        let data = res.data;

        this.imageName = data.store.image ? '/images/json-ld/images/' + 
    }

 <img v-bind:src="imageName" @click="selectImage('initial-image')">