0

I receive image from server with Content-Type: image/bmp, and need to show it on front.

I use react.js for client side, and I don't know how to parse what I'm receiving.

I tried to use Base64 parser and put the result to img.src but it didn't help.

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

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

Also tried using data directly:

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

Didn't help. I see (unknown) in src propertry of img tag.

I want to show result as img tag.

I see respose in code like this

enter image description here

enter image description here

Vitali Skripka
  • 562
  • 1
  • 7
  • 25
  • Did you tried 'data:image/bmp;base64,BASE64DATAGOESHERE...'? – vladwoguer Apr 10 '19 at 20:48
  • 1
    Possible duplicate of [Is there a way to show bitmap data in html image tag?](https://stackoverflow.com/questions/19369334/is-there-a-way-to-show-bitmap-data-in-html-image-tag) – Eriks Klotins Apr 10 '19 at 20:49
  • is your API returning Base64 encoded data?. You have mentioned `'Content-Type: image/bmp`, then the API might be returning an image binary. In that case, you can set the API URL directly in image src. If you don't want to expose the URL then you need to encode your image data to Base64 and set the src as data url `data:image/bmp;base64,${file}` – ajai Jothi Apr 10 '19 at 20:54
  • @ajai Jothi yes, good idea, but this is /POST request that returns me this image. And this API isn't mine, i can't edit it :( – Vitali Skripka Apr 10 '19 at 21:00
  • @VitaliSkripka sounds like your API is not returning a Base64 image, it is returning the actual image binary. So, you have to encode it to Base64 `file = btoa(data)` then `img.src = \`data:image/bmp;base64,${file}\``. Remove `data = Base64.decode(data);` line – ajai Jothi Apr 10 '19 at 21:07
  • @ajai Jothi Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. – Vitali Skripka Apr 10 '19 at 22:10
  • @VitaliSkripka would you able to paste the screenshot of the response? – ajai Jothi Apr 10 '19 at 23:34
  • @ajai Jothi added in description – Vitali Skripka Apr 17 '19 at 19:39

2 Answers2

1

With reference to the screenshot, your API is returning an image binary, so you should encode the raw image data to base64 string.

Note: I hope your requestConfig1 has the requestType:'blob'

Solution 1: Base64 library

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

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

Solution 2: with btoa

using unescape to avoid 'characters outside of the Latin1 range' error. This feature was removed from the web standard but still supported by all the browsers.

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

const img = new Image();
img.src = `data:image/bmp;base64,${data}`;
ajai Jothi
  • 2,284
  • 1
  • 8
  • 16
0

Have you tried:

img.src = `data:image/bmp;base64,${file}`;
Eriks Klotins
  • 4,042
  • 1
  • 12
  • 26