HTML / Javascript setting image source dynamically and getting extra data?

Question

I'd like to be able to set an image source from a server but also have it return extra data relating to another server-side action.

I'll try to explain.

In my index.htm file I have the following in the <body> ...

<div id="BasicDemo" >
    <img id="nscreen" />
</div>
<script type="text/javascript">setImageSource()</script>

The setImageSource() simply does this...

$("#nscreen").attr("src", "/control?size=800x480");

I'm not an experienced HTML coder but I'm experienced enough at coding in general to understand that the above is an implicit HTTP GET request against server-side code in order to request an image which is used to set the <img> source.

What I'd like to do in psuedo-code is...

var someResponse = getImageAndExtra("/control?size=800x480");
$("#nscreen").attr("src", someResponse.imagePath);
var extraData = someResponse.extra;

I'm not directly in control of the server-side code but I know the developer and will be working on this.

What sort of call can I use to request both an image source as well as extra data and still be able to set the "src" attribute? Also at the other end, how would the server-side code construct the response?

I can't help feeling I'm missing something really simple here.

Borealid · Accepted Answer · 2012-01-19 05:12:24Z

1

Your server code would have to return a web page independent of the image.

This web page would contain the path to the actual image, and then (independently), your additional data.

One very common format for this type of communication is JSON. The server constructs a page which looks like this:

{extra: "some-data", image: "/path/to/real/image"}

Just that, no HTML, and it sets the Content-Type of the response to application/x-json instead of text/html.

Then the JS does an XMLHTTPRequest to fetch the above JSON, parses the response, and then sets the src attribute.

There is no location to which you could set the image source which would let you extract additional info (barring image steganography or header tricks or other dirty dealings).

answered Jan 19, 2012 at 5:12

Borealid

99.3k9 gold badges111 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Squonk Over a year ago

Thank you. JSON is something I was looking at but wasn't sure how it would work. Your explanation on Content-Type helps a great deal.

Collectives™ on Stack Overflow

HTML / Javascript setting image source dynamically and getting extra data?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related