英文:
Image Overlay plugin for FilePond Vue
问题
I want a review button on image, but I don't find attribute.
我想在图像上添加一个查看按钮,但我找不到属性。
I set the imagePreviewMarkupShow = true
but it didn't work.
我设置了 imagePreviewMarkupShow = true
但没有生效。
My Template
**我的模板**
My Script
**我的脚本**
How do I add that button?
如何添加该按钮?
英文:
I want a review button on image, but I don't find attribute.
I set the imagePreviewMarkupShow = true
but it didn't work.
My Template
<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>
My Script
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
}
};
How do I add that button?
答案1
得分: 2
我也在面对这个问题时遇到了困难。
解决方法是导入CSS。
import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.min.css'
在Github中没有提到这一点。
英文:
I was also struggling with this problem.
The solution is to import CSS.
import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.min.css'
This is not mentioned in Github.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论