厚框中的图像窗口显示奇怪的字符

Question

I am using thickbox on ubercart/drupal 6 on ubuntu. The problem is I moved the site from a windows machine to ubuntu. All problems with paths and permissions sorted and site is working well. The only problem I'm having now is when I click on a product image, thickbox is supposed to show a preview pop up. Instead, it shows weird characters in the pop up window. A copy/paste of those characters:

JFIF ,, Exif MM ( 1 2 i 4NIKON CORPORATION NIKON D70s , , Adobe Photoshop 7.0 2008:08:21 17:13:50 % " 0221 ֒ ޒ  , 90 90 90 0100 " E X 2008:08:19 15:40:17 2008:08:19 15:40:17 + ASCII ( W H H JFIF H H Adobe_CM Adobe d 7" ? 3 !1AQa . . . . . . and a lot more similar chars

The images are uploaded properly and I can see them under sites/default/files/. Even the thumbnails are generated. These thumbnails appear on the site as well. Also right clicking a thumbnail and open in new tab shows me the whole image properly.

Also, Thickbox sends an ajax GET request for the image to a URL that looks something like this:

http://127.0.0.1/elegancia/?q=system/files/imagecache/product_full/image_1.jpg&random=1299550719133 

Copy pasting the same request from firebug into a new browser tab opens the image successfully.

From firebug, these are the request response headers for the ajax request:

Response Headers
view source
Date    Tue, 08 Mar 2011 02:18:39 GMT
Server  Apache/2.2.16 (Ubuntu)
X-Powered-By    PHP/5.3.3-1ubuntu9.3
Expires Tue, 22 Mar 2011 02:18:39 GMT
Last-Modified   Tue, 08 Mar 2011 01:21:47 GMT
Cache-Control   max-age=1209600, private, must-revalidate
Content-Length  111831
Etag    "4dfe0f3d345781ac89aae5c2a10361ad"
Keep-Alive  timeout=15, max=92
Connection  Keep-Alive
Content-Type    image/jpeg

Request Headers
view source
Host    127.0.0.1
User-Agent  Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.9.2.15) Gecko/20110303 Ubuntu/10.10 (maverick) Firefox/3.6.15
Accept  text/html, */*
Accept-Language en-gb,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Connection  keep-alive
X-Requested-With    XMLHttpRequest
Referer http://127.0.0.1/elegancia/
Cookie  SESS7a3e11dd748683d65ee6f3c6a918aa02=bijhrr4tl66t42majfs3702a06; has_js=1

Answer 1

Looks like it was a thickbox (Javascript) issue. PHP and Apache work fine when it comes to recognizing the image using mime.

If there are arguments in the image URL, eg. (http://127.0.0.1/elegancia/?q=system/files/imagecache/product_full/image_1.jpg&random=1299550719133) - causes Thickbox to show nonsense characters instead due to thickbox image recognition algorithm. URLs not ending with an image extension makes the thickbox javascript to treat the image like another mime type that is not an image.

To work around, one needs to modify line 53 of /modules/thickbox/thinkbox.js, by adding " || urlType == '/preview' " to the list of choices in order to make thickbox.js believe in its heart that a Drupal-encoded image link is in fact an image and not an imposter.

Assuming your image size is "preview," change line 53 from:

if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' ){//code to show images

to this:

if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' || urlType == '/preview'){//code to show images

Also, modify line 50 to this:

var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp|\/preview/g;

(substitute "/preview" for "/thumbnail," "/quarter," or whatever you configured your image module to create (and name) various sizes.

Answer 2

Another solution which I've found is to add a path_info addition to the URL to specify the image-type. For example, my URL previously was:

/image.php?foo=bar

I changed it to:

/image.php/image.gif?foo=bar

Note that if you're using a webserver such as Apache, which by default restricts the use of path_info, you may need to turn it on with the AcceptPathInfo directive for the affected path.

I prefer this solution to altering the Thickbox source, because altering modules which may get replaced with updated versions means a possible loss of fixes, whereas altering the path_info should continue to function with any upgrades.

Answer 3

The browser is rendering the file as text, when it should treat it as a JPEG image. You need to send the 'Content-Type: image/jpeg' header to tell the browser how to render the content. Check your web server configuration.

For Apache, your httpd.conf file should have lines like this:

LoadModule mime_magic_module modules/mod_mime_magic.so
LoadModule mime_module modules/mod_mime.so

...

TypesConfig /etc/mime.types

And then, in /etc/mime.types:

image/jpeg          jpeg jpg jpe

This all applies to files which are served by the web server directly. If you can enter the URL in a browser and see the image, then none of this is a problem.

---

If the files are served by a script, then you need to make sure the header is sent by the script. In PHP:

header('Content-type: image/jpeg');
echo file_get_contents($image_path);