Menu
I am currently working on a simple php website
The problem is , the images in my whole web site(happens in all php files) randomly corrupt and show the error Resource interpreted as Image but transferred with MIME type text/html, however, if I try to refresh the page several times. The image can be loaded again and the error is gone.
I have checked all img path and the image is exist. Also, I checked there is no img src="" in my file. Is it due to server setting? I check .htaccess file and it is blank. How to fix the problem ? Thanks
Chrome web developer:
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
My code (for reference):
<?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>
796
The problem you are facing is caused (most probably) by this line of your httpd.conf:
#LoadModule mime_module modules/mod_mime.so
You must uncomment it so that it looks like (restart apache after that) this:
LoadModule mime_module modules/mod_mime.so
This module is responsible for providing mime types (Content-Type headers) to your HTTP responces. Without it (Content-Type header) your browser must perform so called type sniffing which is roughy described here for IE (but may look alike for other browsers)
Another reason (if you have this module working) is that you lack mime.types file or it does not contain mime types for files that you are trying to serve.
See below - on the left - this is how you are serving your images and on the right is how it should look like:
Left - mod_mime commented out
Right - mod_mime uncommented
113
I opened an image in new tab. Opened developer tools, navigated to Network tab and checked 'preserve log upon navigation'.
Image loaded normally, but after two or five reloads, I received text/html content, which automatically reloaded a new text/html and then finally reloaded automatically to image/jpeg. That's why you see normal image if opened in new tab, and text/html when loading through HTML. Obviously, source of <img/> can't be text/html, so it doesn't reload automatically, as it happens in directly opened image in new tab.
The one with red outline is the first text/html and the blue arrows are the automatic reload indicators.
Here is the log of four requests, normal image, first html, second html and final image - http://pastebin.com/L5wKurZp
I think it a problem in your web server.
I have no idea, but you can try adding this lines to your .htaccess file:
<IfModule mod_mime.c>
AddType image/webp webp
AddType image/jpeg jpg jpeg
AddType image/webp webp
</IfModule>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
