Сервер прислал объект типа 'Buffer'. Как сделать из него ссылку на изображение?

Question

[Edgar]

Сервер присылает мне ответ где помимо прочих данных под ключом 'image' лежит объект с type: 'Buffer', это должно быть изображение.
Под ключом data лежит массив с числами.

Пытался получить ссылку.

const src = useMemo(() => {
    const imgBlob = new Blob(image?.data || [], { type: 'image/jpg' });
    return URL.createObjectURL(imgBlob);
  }, [image]);

Но по полученной ссылке увы ничего не отображается. Что я могу со стороны фронтэнда сделать? Или может изменения нужны на бекенде?

Comments

[Lynn «Кофеман»]

Починить сервер что бы присылал сразу картинку закодированную в base64
Лучше даже сразу в готовом виде для вставки в src. Что-то типа

{"image":"data:image/jpeg;base64,LONGBASE64STRING..."}

[Lynn «Кофеман»]

А в коде у вас ошибка, потому что в конструктор Blob нужен передавать массив «кусочков».
Т.е. вот так new Blob([image?.data || []], { type: 'image/jpg' });

[Edgar]

Lynn «Кофеман», Ну да есть такое дело.)
Но не знаю, может и так нормально работает. Тут дело в самом формате что приходил от бекенда.

Answer 1

[Ivan Ivanovich]

Со стороны бека тебе нужно преобразовать buffer в base64, благо делается это очень просто
Buffer.from('your img buffer').toString('base64')
и дальше все должно работать корректно на стороне фронтента.

P.S. Я думаю, что преобразовать buffer прямо со стороны фронтенда не возможно, потому что сам по себе buffer это прикол от nodejs, js в браузере про него ничего не знает.

Comments

[Edgar]

Да уж, много времени потратил прежде чем понял что проблема в том что фронтенд просто не даёт возможности что-то с этим сделать.
Был какой-то пакет npm - blob-stream, но не понял как им пользоваться вообще.
Спасибо за ответ, буду стучать бекендеру.)

[Lynn «Кофеман»]

Ну вообще-то в JSON нет никакого буфера. Там объект с полями type(строка) и data(массив).