How can i show binary image from fetch response?

How-to Discussions
1 
const photoUrl = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=200&sensor=false?photoreference=CmRaAAAAnyVH-Y0e3Vf_28YNTpOFlA88BdF3HGhMU20Vlt9oep9F-mXTtSKBw6cJJ7yi0O3WUxi8c9UDZP2PAcJ3dMzV_o6HRJ1F6ZKWqW1ffUL23t09AZXWLUbV4P5U3hJZIGPpEhBgAI2lveQYTxhX1EeUbKTQGhR8QxY3nyGB8_lJ_VtNdKP_2TtaYw'
fetch(photoUrl, {
    method: 'GET',
  }).then(function(response){
    console.log('first res');
    console.log(JSON.stringify(response))
    ImageTools.getImageFromBase64(response._bodyInit).then(function(image){
      console.log('render ')
      console.log(image.path)
      args.data.photoUrl.value = image.path;
    })
    response.json().then(function(data){
      console.log('second res');
      console.log(JSON.stringify(data));
      ImageTools.getImageFromBase64(data)
      .then(function(image){
        console.log('render ')
        console.log(image.path)
        args.data.photoUrl.value = image.path;
      })
    });
  }).catch(function(err){
    console.log('err!!!!!')
    console.log(JSON.stringify(err));
  });

https://maps.googleapis.com/maps/api/place/photo?maxwidth=200&sensor=false?photoreference=CmRaAAAAnyVH-Y0e3Vf_28YNTpOFlA88BdF3HGhMU20Vlt9oep9F-mXTtSKBw6cJJ7yi0O3WUxi8c9UDZP2PAcJ3dMzV_o6HRJ1F6ZKWqW1ffUL23t09AZXWLUbV4P5U3hJZIGPpEhBgAI2lveQYTxhX1EeUbKTQGhR8QxY3nyGB8_lJ_VtNdKP_2TtaYw

Above url returns image binary. (image/png content type response). How can I shows the response image to <Image/> tag?
this code throws empty err ({} of object type.) and doesn’t execute callback function passed to getImageFromBase64.

2

Hi dhguswns23,

there are several things wrong with the code you posted, and I wasn’t able to get it working either.

First, you need to put "Fuse.ImageTools" in the "Packages" section of your .unoproj file. Then, you need to put var ImageTools = require("FuseJS/ImageTools"); at the top of your JavaScript code.

Those would be the prerequisites.

Next, there is no saying what args.data in that snippet is. Now, if you’re setting the .value or a photoUrl variable, wouldn’t it be fair if you showed where that variable is defined, exported and how do you use it in UX?

Next, the snippet itself looks faulty. I tried to clean it up a little so you can see what chains on what:

<App>
    <JavaScript>
    var ImageTools = require("FuseJS/ImageTools");
    const photoUrl = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=200&sensor=false?photoreference=CmRaAAAAnyVH-Y0e3Vf_28YNTpOFlA88BdF3HGhMU20Vlt9oep9F-mXTtSKBw6cJJ7yi0O3WUxi8c9UDZP2PAcJ3dMzV_o6HRJ1F6ZKWqW1ffUL23t09AZXWLUbV4P5U3hJZIGPpEhBgAI2lveQYTxhX1EeUbKTQGhR8QxY3nyGB8_lJ_VtNdKP_2TtaYw';
    fetch(photoUrl, {
        method: 'GET',
    }).then(function(response) {
        return response._bodyText;
    }).then(function(data) {
        console.log('second res: ' + JSON.stringify(data));
        ImageTools.getImageFromBase64(data).then(function(image) {
            // args.data.photoUrl.value = image.path;
        });
    }).catch(function(err) {
        console.log('err: ' + err.message);
    });
    </JavaScript>
</App>

And this brings us to the final issue - the string in _bodyText and _bodyInit is not a valid base64. Not only that, the request itself returns with a 400 error code, so you probably can’t run it like that. And since you’re calling it against Google Maps Places API, I think you can find an answer how to do it right on their docs.

3

If you need further assistance after you have solved all of the issues outlined above, please post a complete, minimal reproduction (think: single UX-file app) that can be copy-pasted and run.