React FilePond Preview [File Poster] не работает

Question

Мой код предварительного просмотра FilePond Poster не работает, пожалуйста, помогите мне найти, что я делаю неправильно.

Я пробовал разные варианты кода, показанного ниже, но безуспешно.

-iпопытался включить мгновенную загрузку (не работает)

import React, { Component, Fragment } from 'react';
import { FilePond, File, registerPlugin } from 'react-filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
import 'filepond/dist/filepond.min.css';
registerPlugin(FilePondPluginImagePreview, FilePondPluginFilePoster);

export default class MyFilePond extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        };
    }
    handleInit() {
        console.log('FilePond instance has initialised', this.pond);
    }
    render() {
        return (
            <Fragment>
                <FilePond
                    ref={ref => (this.pond = ref)}
                    allowFilePoster={true}
                    instantUpload={false}
                    server={{}}
                    name="image"
                    acceptedFileTypes={['image/*']}
                    oninit={() => this.handleInit()}
                >
                    <File
                        file={{
                            name: 'my-file.png',
                            size: 3001025,
                            type: 'image/png'
                        }}
                        metadata={{poster : 'https://www.pngarts.com/files/3/Spongebob-Squarepants-Transparent.png'}}
                        source="https://www.pngarts.com/files/3/Spongebob-Squarepants-Transparent.png"
            />
                </FilePond>
            </Fragment>
        );
    }
}

Answer 1

Если вы продолжаете получать ошибку CORS, как в моем случае, вы можете попробовать этот метод: + Клонируйте плагин постера и сделайте его своим собственным плагином.+ В исходном коде постера плагина найдите и удалите эту строку: img.crossOrigin = 'Anonymous';

Answer 2

Вы уверены, что можете получить доступ к файлу на удаленном сервере без установки заголовков CORS?Я ожидаю, что ваша консоль разработчика показывает предупреждение безопасности.