0

I'm trying to get an image from my server without setting any of responseType: blob or responseType: arrayBuffer or responseType: 'stream',...
Here is what I tried:

axios.get('https://xxx/myapi').then(response => {
    const blob = new Blob([response.data], { type: 'application/oclet-stream' });
    const fileURL = URL.createObjectURL(blob);

    const img = document.createElement('img');
    img.src = fileURL;

    document.body.appendChild(img);
});

myapi response is a stream that is an image.
But, the blob response is not my image (it's something like plain text converted to Blob).
Any solution for that?

Phil
  • 157,677
  • 23
  • 242
  • 245
mikenlanggio
  • 1,122
  • 1
  • 7
  • 27
  • @JaromandaX the response is kind of stream of image – mikenlanggio Jun 02 '23 at 04:19
  • _"without setting any [...] responseType"_... why? That is explicitly how you do this – Phil Jun 02 '23 at 04:21
  • @Phil: we have `axiosUtils` in our project base. We have to use that, and cannot modify it. `axiosUtils` does not allow us to pass `responseType`. – mikenlanggio Jun 02 '23 at 04:23
  • I have no idea what that is but it seems very unlikely that you would not be able to use `axios.get(url, { responseType: 'blob' })` – Phil Jun 02 '23 at 04:24
  • Just I cannot pass `responseType` to `axios`! – mikenlanggio Jun 02 '23 at 04:25
  • If you're not actually using Axios, please tag your question appropriately and provide details of the HTTP client library or code that you _are_ using – Phil Jun 02 '23 at 04:25
  • I using `axios`. But in code base project. I cannot pass `responseType`. Don't you understand? – mikenlanggio Jun 02 '23 at 04:27
  • No, I do not understand because you have not provided any details explaining why. If you're using Axios, it is quite literally part of the API and also part of the underlying [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType) – Phil Jun 02 '23 at 04:28
  • @Phil: I just providing details. Don't you read it carefully? The answer in `duplicate question` always has to set `responseType`. I don't want to set it – mikenlanggio Jun 02 '23 at 04:28
  • @JaromandaX if I set `responseType: blob`, it works perfectly. I trying to make it work without set that property – mikenlanggio Jun 02 '23 at 04:29
  • I read very carefully and no, you have not provided details. What is _"axiosUtils"_ and how does it prevent you using web standards? FYI, setting `responseType` is the **only way** to do this with `XMLHttpRequest`. Your only other option is to use `fetch()` – Phil Jun 02 '23 at 04:30
  • @Phil: I'm allowed to set that `responseType` property to `axios`. That it. I want to help it work without setting that property. – mikenlanggio Jun 02 '23 at 04:31
  • Then you aren't using Axios because Axios **does** let you set `responseType` – Phil Jun 02 '23 at 04:32
  • @Phil Ok. just I don't want to set that property, and curious how to reach the result without setting it. I cannot open a question about that?. – mikenlanggio Jun 02 '23 at 04:34
  • @JaromandaX yes. If I set `responseType: blob` it works perfectly. I'm trying to make it work without set `responseType` – mikenlanggio Jun 02 '23 at 04:35
  • _"I don't want to set that property"_... why not? As has been pointed out multiple times now as well as in each answer on the duplicate, that is how you do this. Otherwise, the default is `responseType: text` – Phil Jun 02 '23 at 04:35
  • @Phil: don't ask `WHY NOT`, If you don't know the answer! I said `JUST CURIOUS`. And SO not allow these types of questions? – mikenlanggio Jun 02 '23 at 04:37
  • Ok, the answer is _"you can't"_. I've added another duplicate link which should help explain why you **must** set `responseType` – Phil Jun 02 '23 at 04:39
  • @JaromandaX yes. My server setted `content-type` – mikenlanggio Jun 02 '23 at 04:39
  • @JaromandaX it doesn't matter what content-type header the server sets in the response. `XMLHttpRequest` does not use it to automatically alter or encode the response type. The default is `text` so that's what it will try and interpret the response as – Phil Jun 02 '23 at 04:40
  • @Phil - of course, I keep forgetting axios is just lipstick on XMLHttpRequest :p – Jaromanda X Jun 02 '23 at 04:41
  • @JaromandaX it's `image/jpeg` – mikenlanggio Jun 02 '23 at 04:42
  • The server code would still help ... is it sending the image base64 encoded for example? the fact that you mention `plain text` suggests it could be – Jaromanda X Jun 02 '23 at 04:44
  • @JaromandaX yes. If image is base64 encoded. It works. But I still want to try response as a stream, and catch it from `axios` – mikenlanggio Jun 02 '23 at 04:45
  • but you said that what you DO get is plain text - unlikely with an image – Jaromanda X Jun 02 '23 at 04:46
  • Yes. That why I create this question for help. My server HAS TO return a stream (not base64). And my client HAS TO not set `responseType` – mikenlanggio Jun 02 '23 at 04:47
  • There you go with that _"has to"_ again. I thought you said you were just curious – Phil Jun 02 '23 at 04:49
  • @Phil Ok. I am curious if my server `HAS TO` and my client `HAS TO`. Can I reach my result? – mikenlanggio Jun 02 '23 at 04:50
  • 1
    To summarise all this... XHR does not care what your server says. The default response type handling is `text` so even if it responds with binary data, the client-side still interprets it as text which cannot be blob-ified. Here's a quick demo ~ https://jsfiddle.net/1Ltcjz4r/. It's similar to the Fetch API in that you must call the appropriate [body decoder](https://developer.mozilla.org/en-US/docs/Web/API/Response#instance_methods), ie `response.blob()`, `response.arraybuffer()`, `response.text()`, etc. – Phil Jun 02 '23 at 04:59

0 Answers0