filepond - 我无法在文件池上进行图像预览
问题描述
我已经尽一切努力让它工作,但它还没有工作
我从 cdn 加载,就像在预览文档中一样
<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css"
rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-
plugin-image-preview.css" rel="stylesheet">
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-
preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
为了增强到文件池元素,我有
<script>
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement );
</script>
最后
<input type="file">
它只是显示为一个文件,而不是图像预览。我错过了什么?
解决方案
插件尚未在 FilePond 中注册。
这应该有效:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FilePond Plugin Image Preview Demo</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<body>
<input type="file"/>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin with FilePond
FilePond.registerPlugin(FilePondPluginImagePreview);
// Get a reference to the file input element
const inputElement = document.querySelector('input[type="file"]');
// Create the FilePond instance
const pond = FilePond.create(inputElement);
</script>
</body>
</html>
现场演示:https ://pqina.github.io/filepond-plugin-image-preview/
我正在查看文档,我发现这是多么令人困惑,一旦我有时间就会改进它们。
推荐阅读
- jmeter - JMeter 脚本记录 - NTLM Windows 身份验证失败 - 401 错误
- scala - 在 Scala 中使用数据集创建 CSV
- typescript - 定义一组常量并使用它们的好方法是什么?
- python - 如何从句子中删除数字和长度低于 2 的单词?
- c++ - 如何根据模板的类型有条件地包含语句?
- three.js - 如何为一个动作中包含所有动画的模型制作动画?
- reactjs - 尝试制作一个包装器来处理 React 中的一些重复代码;如何使用论点?
- certificate - 如何确定自签名证书是否放置在 TPM 中?
- javascript - 如何在 Vue.js 中创建回文检查
- reactjs - 使用 useEffect 挂钩在状态更改时更新地图功能