图片随机损坏(但刷新后可以加载),并显示“资源被解释为图像,但传输的 MIME 类型为 text/html”。

7
我目前正在制作一个简单的PHP网站。问题是,我的整个网站中的图像(包括所有PHP文件)会随机损坏并显示错误资源被解释为图像,但传输的MIME类型为text / html。然而,如果我尝试刷新页面几次,图像就可以再次加载,并且错误消失了。
我已经检查了所有img路径,图片都存在。此外,我还检查了文件中是否有img src =“”。这是由于服务器设置引起的吗?我检查了.htaccess文件,它是空白的。如何解决这个问题?谢谢。 Chrome Web开发者:
Request URL:http://goodbyedear.com.hk/images/index_48.jpg
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Cookie:PHPSESSID=ee5297bd4973576b6a318cd9a33c4151; aaaaaaa=96b0422aaaaaaaa_96b0422a
Host:goodbyedear.com.hk
If-Modified-Since:Mon, 21 Oct 2013 17:59:24 GMT
Referer:http://goodbyedear.com.hk/index.php
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Response Headersview source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Close
Content-Length:144
Expires:Sat, 6 May 1995 12:00:00 GMT
P3P:CP=NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM
Pragma:no-cache

我的代码(供参考):

<?php
session_start();
require_once('db_connect.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首頁</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.latest.js"></script>
</head>
<body>
<div id="container">
    <?php require_once ('header.php'); ?>
    <div id="center">
        <img id="slider" src="images/index_17.jpg" />
        <div id="subGroup">
            <div class="sub">
                <img class="subLeft" src="images/index_18.jpg" />
                <img class="subTopRight" src="images/index_19.jpg" />
                <div class="subBottomRight">作為全港第一間成立的寵物火化殯儀公司,其心路歷程盡在此。<a class="viewAll" href="intro.php">View All</a></div>
            </div>
            <div class="sub" >
                <img class="subLeft" src="images/index_21.jpg" />
                <img class="subTopRight" src="images/index_22.jpg" />
                <div class="subBottomRight">讓您了解詳細的服務流程, 令您更安心... <a class="viewAll" href="service.php">View All</a></div>
            </div>
            <div class="sub">
                <img class="subLeft" src="images/index_28.jpg" />
                <img class="subTopRight" src="images/index_29.jpg" />
                <div class="subBottomRight">我們了解每隻寵物在主人心目中都是獨一無二,所以提供各種不同的紀念品,讓客人選擇製作獨一無二的紀念品,讓您的寵兒以另一型式留在主人身邊。<a class="viewAll" href="souvenir.php">View All</a></div>
            </div>
            <div class="sub">
                <img class="subLeft" src="images/index_30.jpg" />
                <img class="subTopRight" src="images/index_31.jpg" />
                <div class="subBottomRight">感謝您對我們的任何意見,歡迎留言給我們!<a class="viewAll" href="board.php">View All</a></div>
            </div>
        </div>
        <div id="latestNews">
            <img id="latestTitle" src="images/index_23.jpg" />
            <img id="latestLeft" src="images/index_25.gif" />
            <div id="latestContent">
                <?php
                $sql = "SELECT * FROM pet_news LIMIT 6";
                $result = $dbh->query($sql);
                if ($result->rowCount() == 0) {
                    echo "<p>沒有最新消息</p>";
                } else {
                    foreach ($result->fetchAll() as $key => $row) {
                    ?>
                    <div class="newsItem">
                        <div class="newsBoxTitle"><?php echo $row["title"];?></div>
                        <div class="newsBoxDate"><?php echo $row["date"];?></div>
                        <div class="newsBoxContent"><?php echo mb_substr($row["content"],0,30,"UTF-8")."......";?></div>
                        <a class="newsLink" href="news.php?page=1#news<?php echo ($key + 1);?>">詳情</a>
                    </div>
                    <?php
                    }
                }
                $dbh = null;
                ?>
            </div>
            <img id="latestBottom" src="images/index_36.gif" />
        </div>
    </div>
    <?php require_once ('footer.php'); ?>
</div>
</body>
</html>
3个回答

4
你面临的问题很可能是由你的httpd.conf文件中的这一行引起的:
#LoadModule mime_module modules/mod_mime.so

您必须取消注释,使其看起来像这样(在此之后重新启动apache):

LoadModule mime_module modules/mod_mime.so

这个模块负责为你的HTTP响应提供媒体类型(Content-Type头)。如果没有它(Content-Type头),你的浏览器必须执行所谓的类型嗅探,IE粗略地描述了它 here(但其他浏览器可能看起来类似)。
另一个原因(如果你的模块工作正常)是你缺少 mime.types 文件或该文件不包含你正在尝试服务的文件的媒体类型。
请看下面-在左边-这是你正在服务你的图像的方式,右边是它应该看起来的样子:

enter image description here

左侧 - mod_mime 被注释掉了

右侧 - mod_mime 被取消注释


3

我做了什么

我在新标签页中打开了一张图片。打开开发者工具,切换到网络选项卡,并勾选“导航时保留日志”。

结果

图片正常加载,但经过两次或五次重新加载后,我收到了text/html的内容,它自动重新加载为一个新的text/html,然后最终自动重新加载为image/jpeg。这就是为什么如果在新标签页中打开,您会看到正常的图片,而在通过HTML加载时会看到text/html。显然,<img/>的源不能是text/html,因此它不会像直接在新标签页中打开的图片那样自动重新加载。 enter image description here 红色轮廓的是第一个text/html,蓝色箭头是自动重新加载指示器。

日志

以下是四个请求的日志,正常图片、第一个html、第二个html和最终图片 - http://pastebin.com/L5wKurZp

原因

我认为这是您的Web服务器的问题。

解决方案

我不知道,但您可以尝试将以下行添加到您的.htaccess文件中:

<IfModule mod_mime.c>
    AddType image/webp        webp
    AddType image/jpeg        jpg jpeg
    AddType image/webp        webp
</IfModule>

我发现这个问题不仅出现在jpg格式中,还出现在gif和css格式中。 - user782104
2
这明显是由于 Web 服务器引起的。你使用的是免费的 Web 托管服务吗?因为我只在免费托管服务上遇到过这样的问题。 - Stichoza
谢谢。我相信问题也是由于托管引起的。因为我的代码在自己构建的Apache服务器上运行良好。我只是想知道是否可以通过在htaccess中添加一些设置来解决它。我尝试了addType,但没有起作用。 - user782104
不,HTML响应过于复杂,不可能是缺少MIME设置的结果。这是服务器上正在主动运行的东西。可能是mod_rewrite,甚至可能是某种负载均衡器上的东西。添加一个答案... - LSerni

1
这张图片并非“损坏”。实际上,你得到的是一个尝试重新加载图像本身的HTML文件;而这种行为并不被所有浏览器支持,因为JS重定向不是标准的HTTP重定向。以下是异常内容:
HTTP/1.0 200 OK
Expires: Sat, 6 May 1995 12:00:00 GMT
P3P: CP=NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 144
Connection: Close

<html><body><script>document.cookie='jjjjjjj=8eb87ff1jjjjjjj_8eb87ff1; path=/';window.location.href=window.location.href;</script></body></html>

这是什么原因导致的呢?当然,你没有得到该图片;请求并没有“着陆”在图片上,而是被拦截了——检查mod_rewrite的设置。系统显然正在尝试设置Cookie并进行重定向,但是它是通过Javascript来实现的。你应该在PHP中进行服务器端操作,并且只发送Cookie头和302重定向。
<?php
    setcookie('jjjjjjj', '8eb87ff1jjjjjjj_8eb87ff1');
    header("Location: {$_SERVER['REQUEST_URI']}");
    exit();
?>

我也收到了同样URL的消息,说明图片不存在。显然有不止一个服务器响应请求。当请求达到"好"服务器时,您会得到图像;否则,您将得到一个HTML“请重试”的消息或直接出错。
HTTP/1.1 406 Not Acceptable
Date: Sat, 16 Nov 2013 22:46:48 GMT
Server: Apache
Content-Length: 389
Connection: close
Content-Type: text/html; charset=iso-8859-1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>406 Not Acceptable</title>
</head><body>
<h1>Not Acceptable</h1>
<p>An appropriate representation of the requested resource /images/index_48.jpg could not be found on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
</body></html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接