1

My api is get() and the response contains data like this

enter image description here

The above image which you can see is my image which I want to display it on web using reactjs. ANd I dont know how can this be done. The get api returns data, config, headers, request, status,statusText I want the data above which I some weird format, my image to be displayed. I dont know how to do it. Need help

Update:

action

export const getFileImage = (payload) => async dispatch => {
    try {
        console.log("Payload--->",payload);
        let response = await axios.get('/api/movies/' + payload.movieId + '/document/' + payload.genre.toLowerCase().toString());
        console.log("Response----->",response);

    } catch (error) {
        console.log("error");
    }
}

Output of response:

enter image description here enter image description here

itiDi
  • 370
  • 3
  • 18
  • did you ask backend developer or api provider about this issue? – Mohammad Esmaeilzadeh Dec 06 '21 at 07:27
  • yes. it works when accessed through app. but when called from web it does not work – itiDi Dec 06 '21 at 07:29
  • through which app? mobile? android or something like that – Mohammad Esmaeilzadeh Dec 06 '21 at 07:31
  • Yes. mobile. android. From mobile, getting response with bodyBytes with status as 200. But when I call the get api from react, it just returns status as 200 and data which in the format above – itiDi Dec 06 '21 at 07:58
  • What do the response headers tell you? Can you add those to your question along with your react code? – eol Dec 06 '21 at 08:00
  • From app, I am getting bodyBytes in response. But when I try calling the same api from web, I do not get any bodyBytes – itiDi Dec 06 '21 at 08:16
  • i think it should returns by something like base64 format for web... apparently android is able to show that format – Mohammad Esmaeilzadeh Dec 06 '21 at 08:34
  • @MohammadEsmaeilzadeh How do I do it on web? reactjs? – itiDi Dec 06 '21 at 08:36
  • 1
    your response is in binary, you have to convert it to base64 before displaying. you can try [this](https://stackoverflow.com/a/54439463/3625973) answer. But it would be better to get the response in base64 itself. Mobile app and web apps are not the same, web apps run on browser, not on the host os, so you cannot create files like mobile apps can on the file storage. – DC- Dec 06 '21 at 09:05
  • 1
    @itiDi In fact, this API returns directly the photo's code, I mean something like binary and basically android is able to show that... you can not use that format for web, I think it would be better to ask backend developer for new route that returns base64 codes or an option to convert output – Mohammad Esmaeilzadeh Dec 06 '21 at 11:01
  • So, is it better to do the base64 at the backend and then send its response to front end? @MohammadEsmaeilzadeh – itiDi Dec 06 '21 at 13:26
  • 1
    @itiDi yes, exactly ! because you can use easily base64 for UI side – Mohammad Esmaeilzadeh Dec 06 '21 at 14:55
  • okay @MohammadEsmaeilzadeh can you write an answer to this then? As I don't know how to do it. – itiDi Dec 06 '21 at 16:20

1 Answers1

1

OK, you asked for an example and I wrote this answer...

You can use base64 format to show Images in your React component:

render(){
    {this.state.image ? <img src={`data:image/png;base64,${this.state.image}`}/>: ''}
}

I think it would be better to ask backend developer or API provider to convert output for web and your requirements in React JS.

Mohammad Esmaeilzadeh
  • 160
  • 7
  • Yes sure. I will try this out and tell the backend developer to send the converted image itself. – itiDi Dec 07 '21 at 16:38
  • I tried this. it shows the image. but when i say open in new tab `target="_blank"` it does not open in new tab. It gives me blank tab – itiDi Dec 07 '21 at 17:07