用于FilePond Vue的图像叠加插件

Question

我想要图像上的检查按钮，但我找不到属性。

我设置了imagePreviewMarkupShow = true，但它没有工作。

这里的包裹

我的模板

    <template>
        <div id="app">
             <file-pond
            name="test"
            ref="pond"
            max-files="4"
            label-idle="Drop files here..."
            :allow-multiple="true"
            accepted-file-types="image/jpeg, image/png"
            :files="myFiles"
            v-on:init="handleFilePondInit"
            allowImagePreview ="false"
            />

        </div>
    </template>

我的脚本

    import  vueFilePond from 'vue-filepond';
    import 'filepond/dist/filepond.min.css';
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

    import FilePondPluginImageOverlay from 'filepond-plugin-image-overlay';
    // Create component
    const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageOverlay);

    export default {
         name: 'app',
        data: function() {
            return { myFiles: [] };
        },
        methods: {

            handleFilePondInit: function() {
                console.log('FilePond has initialized');
    // this.$refs.pond.getFiles();
                // FilePond instance methods are available on `this.$refs.pond`
            }
        },
        components: {
            FilePond
        }
    };

我该怎么加那个按钮？

Answer 1

我也在努力解决这个问题。

解决方案是导入CSS。

import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.min.css'

吉特卜没有提到这一点。