厚箱中的图像窗口显示奇怪的字符答案

【问题标题】：Image window in thickbox shows weird characters厚箱中的图像窗口显示奇怪的字符
【发布时间】：2011-07-10 18:49:20
【问题描述】：

我在 ubuntu 上的 ubercart/drupal 6 上使用了thickbox。问题是我将站点从 Windows 机器移到了 ubuntu。路径和权限的所有问题都已排序并且站点运行良好。我现在唯一遇到的问题是当我点击产品图片时，thickbox 应该会显示一个预览弹出窗口。相反，它会在弹出窗口中显示奇怪的字符。这些字符的复制/粘贴：

��JFIF�,,��Exif��MM�� (��1��2�� 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 . . . . . . . 以及更多类似的字符

图片已正确上传，我可以在sites/default/files/下看到它们。甚至生成缩略图。这些缩略图也会出现在网站上。同样，右键单击缩略图并在新选项卡中打开会正确显示整个图像。

此外，Thickbox 将图像的 ajax GET 请求发送到如下所示的 URL：

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

将来自 firebug 的相同请求复制粘贴到新的浏览器选项卡中会成功打开图像。

来自 firebug，这些是 ajax 请求的请求响应标头：

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

【问题讨论】：

这些图片是用 PHP 提供的吗？看起来可能是标题问题。
检查了标题并插入到上面的原始问题中。看起来更像是一个 javascript 问题当我将其复制粘贴到新的浏览器窗口时，ajax 用于获取图像的 PHP URL 工作正常（显示整个图像）。

标签： php ajax drupal thickbox ubercart

【解决方案1】：

浏览器将文件呈现为文本，但它应该将其视为 JPEG 图像。您需要发送“Content-Type: image/jpeg”标头来告诉浏览器如何呈现内容。检查您的网络服务器配置。

对于 Apache，您的 httpd.conf 文件应该包含如下行：

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

...

TypesConfig /etc/mime.types

然后，在 /etc/mime.types 中：

image/jpeg          jpeg jpg jpe

这一切都适用于由网络服务器直接提供的文件。如果您可以在浏览器中输入 URL 并看到图像，那么这一切都不是问题。

如果文件是由脚本提供的，那么您需要确保标头是由脚本发送的。在 PHP 中：

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

【讨论】：

对于第一部分，在 /etc/apache2/mods-enabled/ 下创建了指向 /etc/apache2/mods_available/mime.load 和 mime_magic.load 的链接以启用它们。对于第二部分，/etc/mime.types 已经包含上述行。该文件也由 apache 指向。重新启动 apache 但问题仍然存在。

【解决方案2】：

看起来这是一个厚盒（Javascript）问题。在使用 mime 识别图像时，PHP 和 Apache 工作正常。

如果图像 URL 中有参数，例如。 (http://127.0.0.1/elegancia/?q=system/files/imagecache/product_full/image_1.jpg&random=1299550719133) - 由于thickbox 图像识别算法，导致Thickbox 显示无意义的字符。不以图像扩展名结尾的 URL 使thickbox javascript 将图像视为另一种不是图像的 mime 类型。

要解决此问题，需要修改 /modules/thickbox/thinkbox.js 的第 53 行，将“|| urlType == '/preview'” 添加到选项列表中，以使thickbox.js 相信其核心是 Drupal 编码的图像链接实际上是图像而不是冒名顶替者。

假设您的图像大小是“预览”，将第 53 行从：

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

到这里：

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

另外，将第 50 行修改为：

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

（将“/preview”替换为“/thumbnail”、“/quarter”或您配置图像模块以创建（和命名）各种尺寸的任何内容。

【讨论】：

我曾经在Thickbox上遇到过同样的问题。请注意，Thickbox 不再维护，其作者建议使用一些替代方案（请参阅jquery.com/demo/thickbox）。
哦。谢谢你的信息。对此一无所知。我现在可能会为 drupal 选择 lightbox /2。

【解决方案3】：

我发现的另一个解决方案是在 URL 中添加 path_info 以指定图像类型。例如，我之前的网址是：

/image.php?foo=bar

我改成：

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

请注意，如果您使用的是 Apache 等网络服务器，默认情况下会限制使用 path_info，您可能需要使用 AcceptPathInfo 指令为受影响的路径打开它。

与更改Thickbox 源相比，我更喜欢此解决方案，因为更改可能会被更新版本替换的模块意味着可能会丢失修复程序，而更改path_info 应该继续在任何升级中起作用。

【讨论】：