Изображения Base64 не отображаются на мобильных устройствах - PullRequest
Новая
       13

Изображения Base64 не отображаются на мобильных устройствах

0 голосов
/ 16 июня 2020

Холла, товарищи разработчики!

Я создал это приложение для электронной коммерции, используя стек MERN, где я создаю продукт как администратор, загружаю изображение, сохраняю его в базе данных как двоичные данные и затем отображаю его на странице МАГАЗИН, используя следующие код: 

src={`data:image/jpg;base64,${img.data}`}

И хотя это отлично работает в моем браузере P C, и все изображения отображаются соответственно, когда я открываю приложение на своем мобильном устройстве, отображаются некоторые изображения и некоторые нет, что не имеет смысла, поскольку все они JPEG, все они примерно одного размера.

Есть ли какое-то правило при использовании изображений в кодировке base64 на мобильных устройствах, или они не работают все вместе, и если есть способ исправить это, как я могу это сделать?

Также каковы самые лучшие и самые надежные методы, когда дело доходит до сохранения изображений в базе данных и их отображения при работе со стеком MERN?

Заранее спасибо!

1 Ответ

0 голосов
/ 16 июня 2020

Технически так быть не должно. У меня есть что-то похожее, и оно отлично работает. Я загружаю изображение, преобразованное в base64, и сделал вызов api, чтобы загрузить то же самое. Сделал еще один вызов API, чтобы получить то же самое и использовать его с изображением sr c. Итак, вот мое преобразование в базовую 64:

// преобразование в базовую 64 // 

`onChange=event=>{
        this.setState({
            file: URL.createObjectURL(event.target.files[0])
        })
        const ProjectfileSize = Math.round((event.target.files[0].size / 1024)); 
        this.setState({
            fileSize: ProjectfileSize
        })
        var reader = new FileReader();
        reader.readAsDataURL(event.target.files[0]);
        reader.onload = () => 
{
            const base64File = reader.result.replace(/^data:[a-z]+\/[a-z\-]+;base64,/, "");
            this.setState({
                convertedFile: base64File
            })
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };

}
`
...