ajax接收image_jpeg,javascript - AJAX request png/jpeg image from (NodeJS + Express) server and show it...

basically I need to receive png or jpeg image from my server, and show it inside img tag on my website.

My architecture looks like this:

Client - Server1 (my server) - Server2 (some public server)

Client sends Ajax request to Server1.

Server1 sends request to Server2.

Server2 sends image back to Server1.

Server1 sends image back to Client.

Client code:

$("#testButton").click(function() {

$.ajax({

method: "get",

async: false,

url: "/test"

}).done(function (response){

alert(response.imageData);

$("#resultImage").attr("src", "data:image/png;base64," + response.imageData);

});

});

Server1 code:

router.get('/test', function(req, res, next){

var url = 'https://ion.gemma.feri.um.si/ion/services/geoserver/demo1/wms?service=WMS&version=1.1.0&request=GetMap&layers=demo1%3Amaribor-dof25&bbox=546631.6237364038%2C156484.86830455417%2C550631.7865026393%2C160485.0310707898&width=767&height=768&srs=EPSG%3A3794&format=image%2Fjpeg';

request(url, function (error, response, body) {

console.log('error:', error);

console.log('statusCode:', response && response.statusCode);

console.log(response.headers['content-type']);

console.log(body);

return res.json({ imageData: body});

});

});

If I enter the url above directly to img src, it is shown correctly.

Image is also shown correctly when I input url directly into browser.

When I receive image data back to my client from server1, data looks like this:

Any ideas how to fix this ?