Jump to content
Larry Ullman's Book Forums

Recommended Posts

On page 358 function.js retrieves an image file with var url = 'show_image.php?image=' + image; where the parameter is the file name provided by images.php on page 361 used by create_window as shown on page 356.  Show_image.php on page 367 takes that filename, and according to line 45 in the script explained by the text, the "file data itself is sent using the readfile() function . . . to the browser."

I have a similar approach where I get an image using <img src="showpicture.php?id=<?php echo $id;?>">.  Instead of sending a file name, showpicture.php gets $picture = $row['picture'] from a mediumblob field in MySQL using an id number.  It then informs the browser with header("Content-type: image/jpeg") and sends the data on with echo $picture.

Readfile($image) and echo $picture both send the binary image file to the browser.  In chapter 15 you explain how jQuery is used.  I tried using it returning the same image in the Ajax call:



  {id: $(this).val()},

  function(data) {



I know the image exists and is being returned as in the first case, but it fails to display using a jQuery selector.  Some people translate the file into base64 to do things, but jQuery should be powerful enough itself.  Maybe PHP handles the file better but jQuery is more particular.  I sure would appreciate any idea on how to proceed.

Link to comment
Share on other sites

Hmmm... So the jQuery performs a GET call to showpicture.php, passing along an id parameter. With the returned data, it takes the first item and sets the src attribute of the #pic element to that value. 


I would start by making a direct GET request of showpicture.php?id=X to confirm that works and what the result is. Then I'd rerun it in the browser and use the developer tools to confirm:

  1. The request was made.
  2. The request succeeded.
  3. What the value of the returned response is.

My inclination is the problem is you're treating data as if it's an array and it's not (in the JavaScript). 

Link to comment
Share on other sites

I tried to make my explanation of the situation brief instead of verbose and its hard to get the whole picture.  The first test pulls the mediumblob image out of the table, and when it echos it with the proper header, the receiving <img> tag gets the image and displays it, which proves that the computer system part is really powerful (and that a valid image exists in the first place and can be transferred and received as a valid binary file).

The page that receives the id request finds one record and one column with $result->fetch_assoc() and that field is put in a variable which is echoed back.  I don't know where it quits being a mediumblob and becomes a jpg, but it all works.  So I thought why not learn something with jQuery since I already have a working jpg?  But somewhere it gets lost when I try to put it into the source attribute of the <img> tag.  My first thought is I'm trying to do it the wrong way, or jQuery can't do that kind of thing.

By the way, I can't do the copy and paste of text from Notepad using the clipboards in the upper-right of this window.  It just doesn't paste something that's been copied to the clipboard. 

Link to comment
Share on other sites

At first I tried to make it more sophisticated with:

  var img = New Image();

  img.src = data[0];


which showed a box with X for the img tag.  Data[0] would be the same as the first element of the array, so I thought it looked more straightforward.  I displayed the picture in the page that retrieved the image as well as when it was returned by the jQuery call.  But they both showed an exclamation point and not the characters of a binary file.  I don't use developer tools because I'm not a developer and I don't want to get in over my head (I just let things develop).  It finally dawned on me that JavaScript and PHP are often apples and oranges, but since I'm not into those tools, I'll never know unless someone else knows the secret.

Link to comment
Share on other sites

As for the clipboard buttons, unfortunately I don't have any insights into those. I'm not sure I've ever used them. 


As for the problem, first, if you're going to do any JavaScript, you must learn to use your browser's developer tools functionality. Otherwise you'll just be blindly guessing as to what's going on. Second, as I said before, I assume the problem is your JavaScript is treating data as an array when it's not (in the JavaScript). What is the result when you make a direct GET request of showpicture.php?id=X (providing a valid X value, of course)? 


Also, just in case it's not clear, the src attribute takes as its value a URL pointing to the image to show (e.g., /img/thing.jpg or showpicture.php?id=X). It does not take a raw image file as a value. 

Link to comment
Share on other sites

I tried to keep the original post so brief the explanation was too concentrated to easily decipher it.  The showpicture.php parts are:

  $sql = "SELECT picture FROM products WHERE prodid = $prodid;

Then when the row is fetched there is:

  $picture = $row['picture'];

It's sent back with:

  header("Content-type: image/jpeg");

  echo $picture;

The page it's successful with has:

  <img src="showpicture.php?id=<php echo $prodid; ?>">;

I figured the sql retrieves the mediumblob image and it may be converted to a jpg when assigned to the variable.  It can't be passing a reference as a link because a mediumblob doesn't even have a path to an image because it does not even exist as such.  However, it may decide later when it sees the header specifying a jpg that its going to convert it then to binary when it sends/echos it back to the calling program.  The caller displays the image properly using what's specified in the <img> tag.  It must be transferring the binary image itself, but jQuery is obviously unhappy with what it's receiving, however in the first use without jQuery it works.  I was just trying to learn something attempting to make it work with jQuery.  Perhaps this is a limitation with jQuery because maybe its not coded for this type of situation.

Link to comment
Share on other sites

No, this isn't a problem with jQuery, you're just trying to do something with HTML that's not possible in HTML. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img


The proper value for the src attribute is a string pointing to the image to show. From that page:

The image URL. 

The src attribute needs a string: a URL indicating where the image can be found. The browser then makes a separate request for that image. When you do showpicture.php?id=<?php echo $prodid; ?>, that's effectively a string pointing to the image to show, effectively the same as using "/path/to/image.jpg". 


You cannot provide an actual image file--the binary--to src which is what you're trying to do. You could, however, change your JavaScript so that it sets the src to showpicture.php?id=Y, where Y is a different value than X.


Also, your PHP script is returning a single entity: the binary data. But your JavaScript is trying to treat that as an array, which it's not. So, separate from the fact that you cannot directly provide a binary to src, your JavaScript wouldn't work because of this other problem.

Link to comment
Share on other sites


  • Create New...