kypriakos
kypriakos

Reputation: 11

DIsplaying image retrieved by Ajax

I read a number of posts on this but nothing seemed to help. I have an ajax client that retrieves an image from a remote web service running on a Jetty server. If I use the browsers (Firefox etc.) the retrieval is displayed successfully. If I use the ajax script the image is displayed as a bunch of unreadable characters. Does the image need to be sent a certain way from the server in the ajax case? I have tried many different methods including data URI ones but nothing seems to work. Any ideas? I will greatly appreciated it. Thakns.

Upvotes: 0

Views: 364

Answers (2)

Juan
Juan

Reputation: 483

The X in AJAX stands for XML. So the result is basicly text. You can change this, but depends on the framework used. Like jQuery

Maybe you are trying to do something that won't need AJAX. Or you AJAX only retrieves the URL of that image.

If you have the IMG DOM Object already instanced in a var like:

var img = document.getElementById('my_img');

and you already have the image path (ie: '/img/img.jpg')

try

img.src='/img/img.jpg';

Upvotes: 0

aorcsik
aorcsik

Reputation: 15552

Actually getting an image asyncronously is the literal way of doing it with javascript:

var img = new Image();
img.src = "http://your img uri";
document.getElementById("image_container").appendChild(img);

No need for XHR type AJAX to get it.

If you need a success callback, you can add it before the img.src definition:

img.onload = function() { /* ... */ }

Upvotes: 1

Related Questions