我无法在文件池上进行图像预览答案

【问题标题】：I can't get image preview to work on filepond我无法在文件池上进行图像预览
【发布时间】：2019-08-28 12:04:48
【问题描述】：

我已经尽一切努力让它工作，但它还没有工作

我从 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

【解决方案1】：

插件尚未在 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/

我正在查看 the docs，我发现这很令人困惑，我会尽快改进它们。

【讨论】：

我在增强脚本中试过了，这样<script type="text/javascript"> FilePond.registerPlugin(FilePondPluginImagePreview)</script> <script> const inputElement = document.querySelector('input[type="file"]'); const pond = FilePond.create( inputElement ); </script>还没有运气
准确复制粘贴。这一次它根本没有变成池塘。除了我删除了预览插件注册。我放回去，就是正常的常规浏览器文件输入框
图片预览插件 URL 中有一个空格。已删除。
打破它一直是我的噩梦。谢谢