Odd entities in generated text (chrome is weird)

Question

Hello!
I am working on a school-project with two classmates. Our task is to make a dynamic gallery for web.
So we got the whole gallery up and running perfect, except chrome is acting mighty weird about it.
We have our pictures uploaded in blob, as well as our thumbnails. We load them from the database through php.

<div id="content_right">
<?php
if(isset($_GET['c'])) {
$c = $_GET['c'];
$thumbs_sql = mysql_query("SELECT foto_id
     FROM `fotos`
     INNER JOIN foto_cat ON fotos.foto_cat = foto_cat.cat_id
     WHERE fotos.foto_cat = $c");
}
else{
$thumbs_sql = mysql_query("SELECT foto_id 
     FROM fotos 
     INNER JOIN foto_cat ON fotos.foto_cat = foto_cat.cat_id
     ORDER BY RAND() LIMIT 8");
}
while($getthumbs = mysql_fetch_array($thumbs_sql))
{
 $thumb_id = $getthumbs["foto_id"];
 $picsource = 'inc/thumbnails.php?thumb='.$thumb_id;
 $thumb .= '<div class="ikon">
 <img alt="'.$thumb_id.'" src="'.$picsource.'" value="inc/picture.php?pic='.$thumb_id.'" />
</div>';
}
echo $thumb;
?>
</div>

The thing is, it works perfect in any browser but chrome. The problem is the browser (or server) seems to add a very odd entity in our file-source (for the img-tag). It cannot be displayed in the page source, neither by echoing the source out. It is only visible through chromes developer tools, and shows up as a square (unknown entity?). It is placed right after "inc/".

(picture-example of the problem in chrome developer tools.)

Not only does this seem strange, but also, it works perfect in chrome when we use a localhost (wamp/mamp/xampp etc.). Likewise, the image can still be downloaded/viewed if hardcoded into either url bar or source.
We have tried converting it to string, adding the slash through php, setting enctype and anything else we could possibly think of.
This leads us to believe it must be a serverside problem? Are we mistaken?
And if not, is there a workaround through coding?

The gallery is live at http://46246.rtsphp.dk/gallery/index.php.
Let me know if you need more files than this somehow, or anything else. Any help would be greatly appreciated, since we ourselves are clueless :S

~Esben Tind (esbentind at gmail dot com)

Answer 1

This is a serverside issue. Your thumbnails.php script is sending the following header:

Content-Disposition: attachment; filename=nytaar1.jpg

This makes the browser try to download the file. I'd suggest searching for that in thumbnails.php and removing it.

Answer 2

You need to HTML-encode all values you use in HTML, using the htmlspecialchars() function, like so:

<img alt="'.htmlspecialchars($thumb_id).'" src="'.htmlspecialchars($picsource).'" value="inc/picture.php?pic='.htmlspecialchars($thumb_id).'" />

Otherwise, if any of the values by any chance contains & characters or similar, you produce invalid HTML, and the output is undefined - some browsers may guess correctly what you meant, others will mis-guess or simply refuse to render your HTML.