Cannot get images to work

[MythosRaconteur]

Hi gang,

I know what I am trying to do is possible, but I am not quite understanding something and thought I'd look for some help.

I am basically building a little success story rotator for a client. I want to use AJAX so it will update the page while the user is browsing it (without having to reload or navigate away for a new story to come up).

So, I have put a DIV in the page with an id of "successStory".

I have the JS code in the HEAD to build the XMLHTTP request object, call the back-end script (PHP on MySQL in this case), and another JS function to handle the result.

I have two problems, one of which may not be appropriate here, but I will ask anyway in case someone can shed some light on it.

1) I am returning from the PHP script a tilde-separated string, and then breaking it apart with SPLIT into an array on the client side. I then construct the inner html of the DIV. All of this works fine, except the IMG. I am basically writing:

innerHTML = "<img src=\"" + resultArray[4] + "\" border=\"0\" />";

The contents of resultArray[4] is the binary data of the image (I am storing the images in the MySQL table, rather than as files in a directory).

I keep getting the little red X icon of an image that cannot be displayed. If my approach is wrong, what is the right way to do this, and if the approach is viable, can anyone show what I am doing wrong?

2) The inappropriate one... I keep getting the same row returned from my query, even though I am closing the connection and reopening it every time. I am also using MYSQL_UNBUFFERED_QUERY instead of MYSQL_QUERY. I am returning one row with the SQL statement:

SELECT * FROM <table> WHERE active=1 ORDER BY RAND() LIMIT 1

Any ideas on this one?

Thanks a million anyone who can help!

Cheers,

Chris

 

[BabyJeffy]

If my approach is wrong, what is the right way to do this, and if the approach is viable, can anyone show what I am doing wrong?

You cannot stream the binary data into the src attribute of an img tag. You have to pass it a URL to an image.

So... you could make a php file that, when requested, returns the binary data of the image (lots of examples out there for this... you need to set the content type headers etc).

An example of how the rendered code on the page will look:

<img src="myImgGenerator.php?id=123" alt=""/>

You will have to build the php file yourself of course... the idea is you can pass in an ID and use that to do the database lookup.

Regarding the second problem, I can't really help (other than to state the obvious: make sure that removing LIMIT 1 returns more than 1 record, and that the order is random each time).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[MythosRaconteur]

Hi Jeff,

Thanks for the info. I have, indeed, seen examples of what you are talking about, but as soon as I saw headers, I assumed that the entire page had to be generated from the call to the image-retrieving PHP. Is this not the case? In my situation, the img tag is a part of other HTML that is embedded in the main HTML page. Will it still work?

Cheers,

Chris

 

[BabyJeffy]

It sure will work. The img element requests the php file as if it were an image... you just need to make the image php script return the data stream as if an image were actually being streamed to the browser.

You can use this technique to watermark images as well as ensure that the images are not being requested from another page (although it's arguably not the best way to do this kind of thing).

Let us know how you go!

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094