Как разобрать в image content-type: image / bmp, полученный с сервера?

Question

Я получаю изображение с сервера с Content-Type: image/bmp, и мне нужно показать его спереди.

Я использую react.js для клиентской части, и я не знаю, как анализировать то, что я получаю.

Я попытался использовать Base64 парсер и поставил результат в img.src, но это не помогло.

let { data } = yield call(axios, requestConfig1);
data = Base64.decode(data);

const img = new Image();
img.src = data;

Также попытался использовать данные напрямую:

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

Не помогло. Я вижу (неизвестно) в src Propertry тега img.

Я хочу показать результат в виде тега img.

Я вижу respose в коде, подобном этому

Answer 1

Со ссылкой на скриншот, ваш API возвращает двоичный файл изображения, поэтому вы должны закодировать необработанные данные изображения в строку base64.

Примечание: Я надеюсь, что ваш requestConfig1 имеет requestType:'blob'

Решение 1: Base64 библиотека

let { data } = yield call(axios, requestConfig1);
data = Base64.encode(data)

const img = new Image();
img.src = `data:image/bmp;base64,${data}`;

Решение 2: с btoa

с использованием unescape , чтобы избежать ошибки «символы вне диапазона Latin1». Эта функция была удалена из веб-стандарта, но все еще поддерживается всеми браузерами.

let { data } = yield call(axios, requestConfig1);
data = btoa(unescape(encodeURIComponent(data)));

const img = new Image();
img.src = `data:image/bmp;base64,${data}`;

Answer 2

Вы пробовали:

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