How to GET image from flask with axios

Question

that's my flask test route which should give image:

@app.route('/marknext', methods=['GET', 'POST'])
def marknext():
    id = request.form.get("ID")
    if request.method == 'POST':
        return "OK"
    else:
        image_file_path = '/home/cnd/contrib/python/input/ChinaSet_AllFiles/CXR_png/CHNCXR_0370_1.png'
        # res = make_response(send_file(image_file_path, add_etags=False, cache_timeout=0))
        # return res
        return send_file(image_file_path, add_etags=False, cache_timeout=0, attachment_filename='CHNCXR_0370_1.png')

and on client side I'm trying to get that file with axios and put it into <img>

  axios.get('/marknext', {
    params: {
      ID: 0
    }
  })
  .then(function (response) {
    var reader = new window.FileReader();
    reader.readAsDataURL(response.data); 
    reader.onload = function() {
      var imageDataUrl = reader.result;
      $("#selected-image").attr("src", imageDataUrl)
    }
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

And I'm getting my Error on console:

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
    at mark.js:14

What am I doing wrong?

Can you check what `response.data` is? `console.log(response.data)` — Diogo Sgrillo, Jul 10 '19 at 14:36
Right before `reader.readAsDataURL` add the `console.log(response.data)` — Diogo Sgrillo, Jul 10 '19 at 14:39
Can I ask why you want to do this in the first place? Why not set `src` to the image URL and let the browser load the file? — , Jul 10 '19 at 15:28
not fully sure but file should get there from different places, maybe I can change target image on hard drive and not html src — cnd, Jul 11 '19 at 06:25

score 3 · Accepted Answer · answered Jul 10 '19 at 14:44

3

Not much experience with Axios, but some Googling lead me to a similar question asked in the ReactJS subreddit. It seems like you need to initialize a Blob using response.data then pass that to readAsDataURL() instead of the response directly.

.then(function (response) {
    var responseBlob = new Blob([response.data], {type:"image/png"}); 
    var reader = new window.FileReader();
    reader.readAsDataURL(responseBlob); 
    reader.onload = function() {
      var imageDataUrl = reader.result;
      $("#selected-image").attr("src", imageDataUrl)
    }
  })

answered Jul 10 '19 at 14:44

TomNash

3,147
2
21
57

it helps! at least partially, now there is no error but image is not showing either, if I insepct page I see `src=data:image/ong;base64, ..... ` and large binary blob but it's not showing – cnd Jul 10 '19 at 14:49
1

check [this answer](https://stackoverflow.com/questions/14915058/how-to-display-binary-data-as-image-extjs-4) – Diogo Sgrillo Jul 10 '19 at 15:16
I've checked answer and was trying some random picks from it, it didn't help – cnd Jul 11 '19 at 06:59

How to GET image from flask with axios

1 Answers1