Image loads and then shows broken link

Hello,
I have an unusual problem in which I have been unable to figure out. On my website, in the HTML I have an image tag which loads an image from a PHP page. This image loads in the browser, and then is replaced by a broken link placeholder. It does this on every browser.

If I browse to the image it displays just fine. It’s just when I load it into a page that it breaks.

Firebug gives me this error:

Image corrupt or truncated: <image_url>

<img src="ajax.php?action=chart&chart=projectCompletion" title="Click to view tabular data." />

The ajax page grabs the data, and then sends it to Google’s Charting API to be charted. I use header(‘content-type: image/png’) and then output the image given back by Google using fpassthru(fopen()).

This has worked fine for me for over a year. I recently moved to a new server and am currently porting my code to work on it. This was the first page I got working. I had another project which took priority and when I came back to this, it is no longer working. I’ve bashed my head out for two days trying to figure it out. Any ideas would be appreciated. Thanks!

Temporarily remove the header('content-type: image/png), and visit the url directly in your browser (not via the img tag). Is anything dodgy (other than image nonsense output) being output?

Ok, now I finally have been able to fix it. But oddly enough, I’m not sure what breaks it. Let me explain.

At the beginning of the page I do:

$auth = new class_auth();

This class has an optional parameter in which I can pass the page name to see if the user has access. If I do not pass the parameter, it gives the user access by default.

I found out that if I comment out this line of code the images work. I also found out that if I go ahead and pass it a parameter of a page name that I have access to it also works. This means the browser doesn’t complain about the images either way.

So, after figuring that out I decided to take a look at the code in my auth class again. If I do not pass a parameter, the only thing that is done is session_start() and then it returns true.

Considering this has been this way for over a year, I am highly doubtful that the session_start() is messing me up. I am ultra confused.

Does anyone have any ideas?

P.S. To clarify: the browser dislikes the images ONLY if I do not pass the optional parameter.

I don’t have a closing PHP tag. :wink:

What I have figured out up to this point is that it actually was being truncated. I have now raised the output_buffer to 1MB, and the truncation is no longer a problem. [Although, this shouldn’t have been a problem.]

The bad thing is, that should have fixed it. Along with adding the ‘b’ into my fopen() and raising the output buffer everything looks fine. But, the browser still thinks it’s either truncated or corrupt. I’m stumped. I’m going to post the straight up file output. Maybe you guys can look at it and see if something doesn’t look right.

&#8240;PNG  IHDR¼U$ wbKGDÿÿÿ ½§&#8220;IDATx&#339;íÝyTSgúðË°/&#8211;¥&#710;* ²T pT¨ .XÁVFËq¬G§&#8218;ZǺ´ã8ÇV&#8216;ÚiZ[©,ö&#338;*v °0.EEA &#8221;²&#8222;dIÂ&#8217;ä÷Çuîä&#8225;h¯-oý~þº÷Í&#8250;÷}&#382;$xï{s£¥R©àçhuÀ(&#8364; À    &#352;àD0ÖüÆÉd²üÑÂÂÂÖÖ&#8211;mlnnîìì|ñÅ÷»ß©w®®®puu%¢&#8211;&#8211;&#8482;Læàà0dÀ&#352;&#352; &#8230;BÁlëëë?ÿüóÜã¹ÿ~ooïøñãa&gt;Ã&#8216;ËåÅÅÅííífff^^^úúú#8¸º&#381;&#381;&#381;þþ~{{{.ëêêLLL,,,F)&#8364;g&#352;&#8364;Ñ&#8226;&#8226;&#8226;µgÏggçS§N±&#376;}öÙ&#8230;¶nÝÆ6&#352;ÅâU«VÉåò[·nQbbbSSÓáÃ&#8225;&#8225;188(&#710;h``@[[;22rÕªUãIOO/,,ü裏&#382;(&#8249;ÆÆÆ&#353;&#353;&#353;Y³f=üPAAÁîÝ»år¹**mcc£¶¶öûï¿ïããóDãs&#8221;&#8211;&#8211;VZZzðàA.qÆÆÆúúúª¿Âð+ay`t¥§§{zzÞ»w¯¶¶V½ÝÐÐ0;;[½%77WOOË&#732;»víÊÍÍÍÍͽzõjxxø¡C&#8225;ª««9ƸqãF&#381;YEEEG&#381;y¸½®®nëÖ*¯¾újVVVjjjvvö+¯¼²sçN±Xü¤S&#338;õ8cbbæÏ&#376;?&aüV¡hEííí·nÝzë*·&L&#732;&#8482;&#8482;©þÐÌ&#8482;3+**&#353;&#8250;&#8250;Ù&#8211;&#339;&#339;??¿'_[[û7ÞwïÞ%¢Ë&#8212;/K¥Ò¬¬¬ï¾û&#381;&#710;ÓÓÓÎ&#382;=ÛÓÓÃ}&#353;&#710;âããããã&#8240;èßÿþwlllDDDsssAAAXXS±&#8224; ~H&#339;'O&#382;¼víUUU*\\¹òƍ&#8240;$..îwÞa9zôè&#8217;&#8217;&#8217;Á&#8212;_~ùÖ[o=é&#8249;ð¬Á5 £&#710;=|$&&&#8211;&#8211;&#8211;º¹¹±¦¤¤¬^½&#353;&#710;òòò<==---¹{åÊ&#8226;ÖÖV"&#8217;J¥&#8482;&#8482;&#8482;sæÌaêêê:þ¼&#8211;&#8211;VZZ&#353;H$:{ö¬¡¡¡J¥&#352;&#338;&#338;LLLܶm;ÈÅ&#8249;[ZZN&#376;>*§§§R©¢¢¢N&#339;8ñöÛoøá&#8225;ÁÁÁþó&#376;&#8240;húôéû÷ïã7BBBRRRÞ}÷]õ0¤Riww÷Ã&#8212;j²âââÂÂÂ&#732;ՐÕ«W&#8225;&#8224;&#8224;2×`N&#8250;6-22&#8217;&#710;&#353;&#353;&#353;¤Ré&#8240;'&#710;ÈØØ&#732;9GBD¥¥¥©©©...D´wïޏ>ú(11ñg&#402;6ÎÃ&#8225;ûùùíÙ³&#8225;&#710;V¯^½|ùòÛ·o{{{&#8216;D"9zô(ùûû¯ZµJ&&#8220;q\\!x6áLÀh©©©)//wss«**Õ××·¶¶²Báëë[SSÓØØHD999Gnhh(--eNà%&&²&#8225;º¥K&#8212;jiiQaa¡&#376;&#376;&#376;¡¡!iii-Z´¨  @}ëׯ»¹¹&#8226;&#8226;&#8226;;::þðÃ2&#8482;ìΝ;L¡CDsçÎMIIy|0J¥rØöîîîü&#8216;=áììüâ&#8249;/2ëDäééÉl&#732;&#8250;&#8250;³Ûfffìh&#381;&#381;&#381;LÅ@D¯½öZII&#8240;L&{|ð&#352;°°°0((&#710;Ù¶±±ñòòbÃ`×&#402;&#732;/Y°_K&#8364;aáLÀhÉÈÈûÛß&#732;ÝÁÁÁììì-[¶0u"200&#732;3gNVVÖk¯½VXX¸wïÞ&#353;&#353;.#¿þúëìq}SSSfC"&#8216;ØÙÙ±íæææC.Nìîînoogþ&#8249;Ïprr&#8217;H$J¥ÒÜÜ&#339;iÑÖÖVd###SSÓºº:¡P¨Þ~üøq}}ýÀÀ@f^õØK+؁&#8482;åáÁÕOºXXX(&#8226;J&#8240;Dòøà&#8225; rppp``àQa0Ep&#8222;¢`´dff®[·.<<&#339;Ù*®®^±bÅ*[·¦O&#376;Îö    üôÓO---&#8230;B¡&#8482;&#8482;ÙÎþÜsÏ555±»CÖ>¬¬¬&#339;&#8482;e"jmm055ÕÕÕmmmej&#8240;D&#8217;&#8217;&#8217;²nݺGÍâëë{ñâÅàà`¶E.&#8212;&#376;>}zíÚµ&#8211;&#8211;&#8211;ÚÚÚMMMl^MMMVVVãW¾¶¶VOO*&#8225;ü°ãssóæææ)S¦°/ÅÄ&#8240;9&#8224;ê°<0*&#352;&#8249;&#8249;-ZĶL&#353;4iòäÉCV(fÏ&#382;ÝÐА&#8217;&#8217;Âü¿|ùûûçååýôÓOD$&#8249;Ï&#339;9ãïï¯ÞaîܹÌ×7z{{£££sssÁ¬Y³&#8217;&#8220;&#8220;&#8482;e&#8218;sçÎ}óÍ7ÌÍ&#353;&#8224;ýEÜõë×WVV8p&#8364;ù&#382;&#8218;L&Û¿¿B¡X²d&#8240;Ïç&#376;Î&#8226;&#382;&#382;~ÿþý&#8482;3gr&#338;¿¾¾>==óóÏ?ÿýïÏÜ&#353;â1Á3=§¿¿jj*³ºqëÖ*&#8217;&#8217;&#8217;'ý&#8211; 0p¦`Tddd¸ººN&#732;0A½qáÂ&#8230;©©©;vì`[ôôôüýý³²²~Á÷&oÖ¬YK&#8212;.ýãÿ8eÊ&#8221;ÚÚZWW×5kÖ¨w,((øÃþàääT[[;uêÔ×_&#710;Þ~ûíÈÈÈàà`SSÓ&#8224;&#8224;&#8224;ýû÷&#8216;&#8226;&#8226;Uuuõ¦M&#8250;>¬¾²0~üøC&#8225;íÞ½û믿¶±±ikk366þÇ?þÁ\\"°}ûö¨¨¨àà`ssó&#376;~úéwÞá~¦ÁÑÑñÓO?MIIéèè011Ù»w/&#8212;àÕãd;GGGGEE-]ºÔÖÖ¶²²2::ÚÑÑñ¾¬Ï6*aÿ÷¿ "&#8216;¨ººzܸqì·6RSSÕïYWWW[[kkk«~M&#8364;B¡(**êïïwwwg¾ÌIDÅÅÅ&#8240;dØ&#8250;B*&#8226;ʲ²²&#381;&#381;sss777õSÌP½½½nnn¿BDIII&#8230;&#8230;&#8230;~øáþómmm¡P¨>&kØà&#8225;S¥Rݽ{·««ËÅÅÅÚÚ&#353;c0&#352;&#8364;gËÁ&#402;[[[ãââÆ:Ça&#352;&#8224;&#8225;o¡ c×4ävLáLÀ3&#8222;ý¥«§&#339;B¡P(¸ÏÀÓEp&#8218;å    àEp&#8218;¢8AÑ&#339; hNP4'(&#8364; À    &#352;àEp&#8218;¢8AÑ&#339; hNP4'(&#8364; À&#8240;F&#8249;&#8224;&#352;&#352; MN#H£ECii©&§&#8364;&#8222;å    àEp"Ðð|Z_*Òð&#338;#å_sþ²ÄÎk¬£38Ó&#339; hNP4'(&#8364; À    &#352;àEpò¿û4´µµ¥¥¥uuuùøøøúúQUUUvv¶T*uuu]¼x±¶ö&#402; £±±1))I}&#8221;;w666Þ¹sgòäÉÎÎÎDÔÝÝ}ãƍh0E&#352;&#8224;ÁÁÁ#G&#381;&#8222;&#8224;&#8224;ÚÙÙ;vÌÖÖÖÎÎîøñãáááãƍûâ&#8249;/233&#402;&#8218;&#8218;&#732;ÎÖÖÖëÖ*c¶+++ËÊʺ»»SRR&#8211;.]&#353;&#8220;&#8220;£««;iÒ¤ôôtT¿%&#352;&#8224;²²²ñãÇ»»»Ñƍuttêëë_zé%GGG"òõõ½råÊÿ&#382;#ØØØÑàà`rròƍ\\\\\\ÜÜܤRi}}½¡¡¡&#382;&#382;&#382;&#8226;&#8226;ÕXd£âAÑÐÐÐ ««&#8250;ÐÕÕåååµxñb333WWW"R*&#8226;ùùùNNN?9++kÆ&#338;FFF&#8220;&Múúë¯O:%&#8240;"""Î&#376;?¿bÅ ¶[GGGkk+õöö&#8217;®FÒ&#8364;&#8216;ö h¸wï^LL&#338;&#8240;&#8240;É'&#376;|biiéããCDååågÎ&#339;quu ò̾¾¾&#8250;7oîÞ½&#8250;&#710;ALLLcc£M}}½***®®î¥K&#8212;´´´üüü4&#339;&#338;&#8224;×6N&#8250;6ÍÆÆÆÐÐpæÌ&#8482;UUUD&#8221;&#8211;&#8211;&#8211;&#382;&#382;þ§?ýiùòåZZZC&#382;&#8482;&#376;&#376;?mÚ4öêH==½K&#8212;.$%%éëëkii>}ÚÊÊÊÕÕÕÕÕÕÐÐP&#8220;¹ÀzpÈ&#376;8q¢H$b¶E"&#8216;&#8230;&#8230;EmmmyyyLL&#338;Û»³³S&&#8220;1Û7oÞôòúkowîÜqssÓÕÕíéé&#8482;3g&#381;¿¿SSÓèg£îÁò&#8222;£££&#8216;&#8216;Ñ|`llÜÙÙsíÚµúúú-[¶0&#8222;BáÚµkãããCBB<==¥RiGG&#8225;½½½úXJ¥òúõëLÿ#G&#381;(&#8226;ÊÙ³gk8% Z*&#8226;&#352;Ýinn&#8211;Éd/Fp!&#8212;Ë%&#8240;&#8230;&#8230;³{ÿþ}@`jjÊv¸pá«ò¯~eÄcå_sþ²ÄnèV&#8364;g&#8225;@}ÇÖÖö×&#338;¥««ËVDdiiùkF&#8364;§ n# &#339; hNP4'(&#8364; À&#8240;àç»&#338;(ÕNixF8Ó&#339; hNP4'½¦¡»»ûÛo¿Õä&#338;#®½½}ܸqcůÂ÷ø?!&#8230;§Rs|&#376;~)&#8218;ùóç?AÿÑåafff.Ôä&#338;#îÂ&#8230;Halñ=~B O¤0æø?ýVRx¢þX&#382;NtöìÙ£±É &#8230;µµµÆ¦ HaÌñ=~B O¤0æø?=&#8220;)ü¿&#376;Æx.O&#710;Åb&#8230;B¡ÉG&#352;R©ìííewU*Uww÷Æó&#710;Åb&#8482;LÆîò.&#8230;îînõïâgH¥R¥RÉló.&#8230;ööö&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;ÎÎN¦&#8230;w)QÿÀÀ»Ë¯$I&#8249;æ/&#8218;_)&#8216;D"dwy?uww³ÈÄ«~öX&&#8226;JårùcFÐ\\Ñ°fÍ&#353;W^yE(æççklÒ&#8216;rêÔ©øøxf»¤¤D(¾úê«!!!ê&#376;&#8250;§VPPPHH&#710;··÷¡C&#8225;&#710;o)ôôô¼üòË+W®ôôôLKK#¾ÅÏ&#8249;Å&#8226;&#8226;&#8226;ÄÃ&#8221;J¥³³ó²eË&#8211;-[¶sçNâa Dô׿þuÞ¼yÓ§OOII!¦pòäÉeÿåääTYYɯ&#8218;&#402;&#402;&#8212;-[æíí}ñâEâá[ &#8249;-Zêáá&#8216;&#8212;&#8212;G|KáñDzwß}wþüùÞÞÞçÏ&#376;ä*øî»ïBCCU*UIIÉìÙ³53éH 266&#381;ev&#402;&#402;&#402;¯^½ªR©Þ|óͯ¾újLCã$555::Z¥RõõõM&#732;0A*&#8226;ò+&#8230;&#8222;&#8222;&#8222;}ûö©Tªªª*ßÆ&#353;5kƏ_^^®âa 555K&#8211;,Qoá] ·oß R©Tb±xåÊ&#8226;*¦À*((Wñ-&#8230;³gÏ®_¿^¥R555    &#8230;BßâW©Tï½÷s,hhh&#732;>}º&#352;W)<þXÆþÛÖÖæääô¨A4t¦áÚµk, ¢&#8212;^zI$©xu!Å7ß|sðàAv·¨¨höìÙD´`Á&#8218;ëׯ]\\\\yzznÞ¼&#8482;&#710;´ÿ&#8249;_),[¶lÃ&#8224; &#8230;¢¤¤ÄÞÞ&#382;xøQrrò&#8221;)S\\\\\\&#732;]Þ¥PUUÕßß¿~ýú-[¶444S¸téÒâÅ&#8249;Ï&#339;9&#8220;&#8220;&#8220;&#8220;&#353;&#353;JïR ¢ââb[[[333f&#8212;_)Èd2æP$&#8221;J¥\\.çWüDtåʱXüÞ{ï½ðÂvvv&#8364;w)°&#8224;DΦûúúêêê^xá&#8230;á&#376;¦&#8216;Ë/Tr¹ÜÏÏoóæÍ3f̸xñ¢f&AÇ&#381;c/ÉÉÉ&#8482;1cÆæÍ&#8250;gÎ&#339;Ù××7¶qammýâõôôð+&#8230;²²277·¨¨¨&#8212;_~yÿþý*¾¬&#8364;&#8364;æBHÞ¥PQQáêê9gÎ&#339;øøxSÉd¾¾¾k×®õ÷÷gþ&#339;y&#8212;&#8218;J¥Ú·o_BB»Ë¯jkk=<<6lØ0o޼ݻw«ø¿J¥jkksww&#338;&#338;ôööÎÏÏWñ-&#8230;ÇËBCCß|ó͹sçªÆ&#8224;ÐÜ͝ EQQ&#8216;½½½ff=***"&#8216;ÈÓÓ&#8220;¿§Lø&#8226;Boooyy¹ú&#8225;&#8225;_ñ&#8249;w)ô÷÷3×¢ÚÙÙ1-¼KA©T[YY9880-¼KáaüJA&&#8220;&#8226;&#8221;&#8221;ØÙÙñ÷SÔ××WRRâââbbb´ð.ÖÃ&#8216;&#8250;&#8250;&#8250;O&#732;0áQOÁ!&#8364;ü`p&#8218;¢8ù?¼â[&#8212;UߦIEND®B`&#8218;

There is no white space being output anywhere? Is the open tag right at the start of ajax.php, and no close tag?

Yeah, that was something else I tried. The code looks fine. There is no trailing white space (if that even matters). I even did a “Save Page As” and saved it as a PNG. No graphics viewer or editor even complain about it.

The closing tag is definitely there.

I think I am finally starting to figure out what is wrong. But I am not having any luck fixing it. According to PHP’s documentation.

If you do not specify the ‘b’ flag when working with binary files, you may experience strange problems with your data, including broken image files and strange problems with \r
characters.

So I put the ‘b’ tag in my fopen statement, but the browser still thinks it’s a broken image.

Here is my function:

function chart_data($chartType, $chartSize, $chartData, $visibleAxis, $title, $color, $labels, $margin) {
	
	// Create some random text-encoded data for a line chart.
	header('Content-Type: image/png');
	$url = 'http://chart.apis.google.com/chart?chid='/* . md5(uniqid(rand(), true))*/;
	
	
	// Add data, chart type, chart size, and scale to params.
	$chart = array(
		'cht'	=> $chartType,
	    'chs'	=> $chartSize,
	    'chd'	=> $chartData,
		'chxt'	=> $visibleAxis,
		'chxs'	=> "0,000000,10,0,lt",
		'chtt'	=> $title,
		'chco'	=> $color,
		'chxl'	=> $labels,
		'chma'	=> $margin
	);
	
	// Send the request, and print out the returned bytes.
	$context = stream_context_create(array(
		'http' => array(
			'method' => 'POST',
			'content' => http_build_query($chart),
			'header' => "Content-Type: image/png\\r\
")));
	
	// Send it to the requesting URL.
	fpassthru(fopen($url, 'rb', false, $context));
}

This issue only surfaced since I am moving from a Linux machine to a Windows machine.

It would be best to remove the close tag from ajax.php - it doesn’t need to be there, and you may end up outputing whitespace after it to the browser if it is in there.