Загрузить и показать изображения в React - PullRequest
Новая
       36

Загрузить и показать изображения в React

0 голосов
/ 15 января 2020

Я хочу загрузить несколько фотографий и отправить их по почте в теле письма, используя React (Gatsby) и Strapi. Но проблема в рендеринге / показе фотографий.

У меня есть функция для преобразования изображения в base64 следующим образом: 

const toDataURL = (url, callback) => {
    let xhr = new XMLHttpRequest();
    xhr.onload = function() {
        let reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
};

Я использую React Dropzone .

Я использую его следующим образом: 

const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
        multiple: false,
        accept: 'image/jpeg, image/png, image/jpg',
        onDrop: acceptedFiles => {
            let test = acceptedFiles[0];
            toDataURL(test, (dataUrl) => {
                setTest(dataUrl);
            });
        }
    });

Внутри onDrop функция загруженного файла, как на фото:

enter image description here

Я пытаюсь показать изображение следующим образом: 

return (
   <div>{test !== null && <div><img src={test} /> </div>}</div>
)

Но изображение не отображается. В консоли это выглядит следующим образом: enter image description here

Но когда я использую какое-то другое изображение из inte rnet, например https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0 вместо acceptedFiles[0], и передаю это toDataURL функция в onDrop, затем изображение отображается:

enter image description here

Любая идея, что я делаю неправильно и как ее решить

...