Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

My CGI program using CGI.pm generates pages with embedded GIFs, but GIFs are not being displayed in the page, but instead the text and binary data sent from the server is being appended to the HTML page.

In the attached text, if you look after </HTML> you will see a list of 5 GIFs for the page. Then there is the server response for each of the 5 GIFS, plus the binary data comprising the GIF.

This is happening on 2 PCs and a Mac using several versions of IE, but not with other browsers on the same machines. No one else sees this problem using IE.

I am generating headers as follows: print header ('text/html', '200 OK'); The problem also occurs without the 2d argument.

Here are two URLs of problem sites. The server output for the first one is attached also. Other peculiarities of the output are the "1FEE" it starts with, and various references to HppPromise.

http://www.systemsplanning.com/cgi-bin/mwebcgi/mweb.exe

http://64.70.191.181/mwebcgi/mweb.exe 

1FEE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><
+head><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-
+8859-1"><title>MWeb</title><style type="text/css">#topdiv            
+{border-bottom: 5px solid darkblue; height:100px; left:0; position:ab
+solute; overflow:hidden; padding-top:20px; text-align:center; top:0; 
+width:100%; } #menupane            {left:0; overflow:auto; padding:8p
+x; position:absolute; text-align:center; top:100px; width=150px; } #m
+idpane            {background-color:darkblue; height:; left:150px; po
+sition:absolute; top:100px; width:5px; } #datapane            {left:1
+56px; overflow:auto; position:absolute; top:100px; } #dialogdiv, #srd
+iv
                        {background-color:white; position:relative; to
+p:0; left:0; text-align:center; overflow:hidden; padding:8px; } #dial
+ogdiv            {width:550px; } #srdiv                {width:100%; }
+ #diafooterdiv        {width:550px; overflow:auto; padding:8px; font-
+size:x-small; text-align:center } #srfooterdiv        {font-size:x-sm
+all; padding:8px; text-align:center; width:100%; } a.hierlink:link   
+ {color:black; text-decoration:none; } a:hover            {color:red;
+ } .as_label            {font-weight:bold; } body                {bac
+kground-color:#ddddff; color:darkblue; font-family:verdana; margin:0;
+ overflow:hidden; } button, .main, .mainoff, .mainon
                        {background:#eeeeee; color:darkblue; font-fami
+ly:Arial, Helv, sans-serif; font-size:9pt; font-weight:bold; margin:5
+px; border:2px darkblue solid; text-align:center; text-decoration:non
+e; } button.inline         {margin:15px; padding:1px; } .main, .maino
+ff, .mainon
                        {padding:5px 0; width:120px; } .main          
+      {color:darkblue; } .mainoff            {color:darkgray; } .main
+on            {color:darkred; } .cs_nolink            {font-size:x-sm
+all; color:gray } .cs_link            {font-size:x-small } .df_emphas
+is        {font-weight:bold } .df_heading         { color:darkblue; f
+ont-size:105%; font-weight:bold; margin-top:10px } .df_footerlink    
+ {font-size:x-small } .df_note             {font-size:x-small } .df_t
+itle             {font-size:large; font-weight:bold } .fieldnameheade
+r    {background-color:#ddddff;color:black;font-weight:bold; text-ali
+gn:center}.fr_label            {font-size:10pt; font-weight:bold; tex
+t-align:right; vertical-align:top } .materialheader    {background-co
+lor:darkblue;color:white;font-size:120%;font-weight:bold; text-align:
+center}.mm_footer         {font-size:x-small } .mm_footerlink     {fo
+nt-size:x-small } .results             {font-family:'Lucida Sans Unic
+ode',Helvetica,Helv,Arial,sansserif; font-size:x-small } table.df_bot
+tom     {width:100%; padding:15px }table.df_inner     {width:100%; ba
+ckground-color:white; padding:5px }table.df_outer     { width:650px; 
+background-color:#aaaaaa; padding:5px }td                     {font-f
+amily:'Lucida Sans Unicode',Helvetica,Helv,Arial,sansserif; font-size
+:x-small } td.hier             {font-variant:small-caps } th         
+            {font-family:'Lucida Sans Unicode',Helvetica,Helv,Arial,s
+ansserif; font-weight:bold; font-size:x-small } </style>

<script type="text/javascript"><!-- hide 
var finalStart, finalEnd; 
function setbutton (form,button) 
{ 
if (button=='keyword') 
{ 
if (form.keyword.value.length==0) 
{ 
alert('Enter keyword before clicking Search'); 
return; 
} 
if (form.srchtype [1].checked) 
button='keywordimages'; 
form.request.value=button; 
if ((finalStart > -20000) && (finalStart < 20000)) {form.startDate.val
+ue = finalStart;} else {form.startDate.value = '';} if ((finalEnd > -
+20000) && (finalEnd < 20000)) {form.endDate.value = finalEnd;} else {
+form.endDate.value = '';} form.submit(); } 
} 
var selectedObj, offsetX, spanObj, calcStart, calcEnd, firstStartMove,
+ firstEndMove, origStartX, origEndX, datapanestart; function dragIt(e
+vt) {if (selectedObj) { if ((spanObj.id == 'tlleft') && firstStartMov
+e) { firstStartMove = false; origStartX = window.event.clientX; } if 
+((spanObj.id == 'tlright') && firstEndMove) { firstEndMove = false; o
+rigEndX = window.event.clientX; } shiftTo(selectedObj, window.event.c
+lientX - offsetX); if (spanObj.id == 'tlleft') calcStart = parseInt(d
+ocument.getElementById('tlleft').style.left) - origStartX + 4 + datap
+anestart; else calcEnd = parseInt(document.getElementById('tlright').
+style.left) - origEndX + datapanestart; if (!firstStartMove){ if (cal
+cStart < 1) {finalStart = -20000} else {if (calcStart < 36) {finalSta
+rt = -3000} else {if (calcStart < 168) {finalStart = -4100 + (Math.ro
+und (calcStart / 3) * 100)} else {if (calcStart < 198) {finalStart = 
+1500} else {if (calcStart < 345) {finalStart = 850 + (Math.round (cal
+cStart / 3) * 10)} else {if (calcStart < 381) {finalStart = 2000}else
+ {finalStart = 20000} }}}}}}if (!firstEndMove){if (calcEnd < -380) {f
+inalEnd = -20000} else {if (calcEnd < -342) {finalEnd = -3000} else {
+if (calcEnd < -210) {finalEnd = 8500 + (Math.round (calcEnd / 3) * 10
+0)} else {if (calcEnd < -181) {finalEnd = 1500} else {if (calcEnd < -
+32) {finalEnd = 2100 + (Math.round (calcEnd / 3) * 10)} else {if (cal
+cEnd < 0) {finalEnd = 2000} else {finalEnd = 20000} }}}}}}if (finalEn
+d < finalStart) {finalEnd = finalStart} if ((finalStart == -20000) &&
+ (finalEnd == 20000)) document.getElementById('tlresult').innerHTML =
+ 'Current selection: all dates';else if (finalStart == -20000) docume
+nt.getElementById('tlresult').innerHTML = 'Current selection: earlies
+t to ' + finalEnd;else if (finalEnd == 20000) document.getElementById
+('tlresult').innerHTML = 'Current selection: ' + finalStart + ' to la
+test';else document.getElementById('tlresult').innerHTML = 'Current s
+election: ' + finalStart + ' to ' + finalEnd;}return false; }  functi
+on engage(evt) { setSelectedElem(evt); if (selectedObj) offsetX = win
+dow.event.offsetX + datapanestart; return false; } function release(e
+vt) {if (selectedObj) selectedObj = null}function setSelectedElem(evt
+) { spanObj = window.event.srcElement.parentElement; if ((spanObj.id=
+='tlleft') || (spanObj.id=='tlright')) { selectedObj = spanObj.style;
+ if (selectedObj) { selectedObj.position = 'absolute'; return; } } se
+lectedObj = null; return; } function shiftTo(obj, x) { obj.left = x +
+ 'px'; } function init() {document.onmousedown = engage; document.onm
+ousemove = dragIt; document.onmouseup = release; firstStartMove = tru
+e; firstEndMove = true; calcStart = 0; calcEnd = 0; finalStart = -200
+00; finalEnd = 20000; datapanestart = 160; } //stop hiding --></scrip
+t></head><body onLoad="init()"><div id='topdiv'><table width=100%><tr
+><td width=150 align=center><a href='http://www.systemsplanning.com'>
+<img src='/mwebgraphics/sp_logo.gif' border=0 width=120></a></td><td 
+style='color:darkblue; font-family:verdana; font-weight:bold; font-st
+yle:italic; text-align:center; font-size:28px'>The Pottery Site</td><
+td width=150 align=center><a href='http://www.systemsplanning.com/mwe
+b/'><img src='/mwebgraphics/mweblogosmall.gif' border=0></a></td></tr
+></table></div><div id='menupane'><span class=mainoff>Search Results<
+/span><br><a class=main href="/cgi-bin/mwebcgi/mweb.exe?request=ivpag
+e0" onmouseover="window.status=''; return true;">Image Viewer</a><br>
+<a class=main href="/cgi-bin/mwebcgi/mweb.exe?request=click" onmouseo
+ver="window.status=''; return true;">Click &amp; Search</a><br><span 
+class=mainon>Keyword Search</span><br><a class=main href="/cgi-bin/mw
+ebcgi/mweb.exe?request=advform" onmouseover="window.status=''; return
+ true;">Advanced Search</a><br><br><span class=mm_footer>This is an <
+a class=mm_footerlink href='http://www.systemsplanning.com/mweb/credi
+ts.asp'><b>MWeb</b></a>&#8482;<br>Museum Website</span><br><br></div>
+<div id='midpane'>&nbsp;</div><div id='datapane'><script type="text/j
+avascript">document.getElementById('menupane').style.height=document.
+body.clientHeight-100;document.getElementById('midpane').style.height
+=document.body.clientHeight-100;document.getElementById('datapane').s
+tyle.height=document.body.clientHeight-100;document.getElementById('d
+atapane').style.width=document.body.clientWidth-155;</script><div id=
+dialogdiv><form name=mainform style='margin:0px' action='/cgi-bin/mwe
+bcgi/mweb.exe' method=post onSubmit="document.mainform.subset.value=d
+ocument.mainform.subsets.selectedIndex; setbutton (this, 'keyword');"
+><input type=hidden name='request'><input type=hidden name='subset'><
+input type=hidden name='startDate'><input type=hidden name='endDate'>
+<div class=df_heading>Enter one or more keywords, then click Search
096B
</div><div align='center'><br><input type=text name="keyword" size=30 
+value=""></div><div style='padding:10 40 0 40; text-align:left'><br><
+b>Search in</b><br><input type='radio' name='srchtype' checked>All re
+cords<br><input type='radio' name='srchtype'>Only records with images
+<p><b>Record types</b><br><select name="subsets"><option>All Records<
+/option><option>Pots</option><option>Images</option><option>Clays</op
+tion><option>Firings</option><option>Glazes</option><option>Materials
+</option></select></div><div class=df_heading colspan=3>Timeline</div
+><div id='tlnote' class=df_text>Move red markers to select date-range
+</div><div id='tlcell' style='padding:6'><span id='tlleft'><img src='
+/mwebgraphics/left.gif'></span><span id='timeline'><img src='/mwebgra
+phics/timeline.gif'></span><span id='tlright'><img src='/mwebgraphics
+/right.gif'></span></div><div id='tlresult' class=df_text>Current sel
+ection: all dates</div><button class="inline" onclick="document.mainf
+orm.subset.value=document.mainform.subsets.selectedIndex; setbutton (
+document.mainform, 'keyword');" onMouseover="style.background='#eeeee
+e';style.color='#ff0000'" onMouseout="style.background='#eeeeee';styl
+e.color='darkblue'">Search</button><button class="inline" onclick="he
+lpwin=window.open ('','mwahelp','width=700,height=450,resizable,scrol
+lbars'); helpwin.location='http://www.systemsplanning.com/mweb/mwahel
+p.asp#keysearch'; helpwin.focus ();" onMouseover="style.background='#
+eeeeee';style.color='#ff0000'" onMouseout="style.background='#eeeeee'
+;style.color='darkblue'">Help</button></form></div><div id=diafooterd
+iv>This is a demonstration of MWeb&#8482; functionality
&nbsp;The design of the MWeb interface is customized to your requirem
+ent, so your MWeb
site will certainly look much better than this demonstration!
&nbsp;Go to our website (by clicking on the MWeb icon in the upper ri
+ght) to find links
to live MWeb client sites with beautiful designs
&nbsp;HTML, JavaScript, and system copyright &copy; 1997-2004 by Syst
+ems Planning.
All rights reserved
&nbsp;Images and data copyright &copy; 1999-2004 by Systems Planning,
+ and may not
be used or reproduced without permission.
</div></div><script type="text/javascript">document.mainform.keyword.f
+ocus ();</script><script type="text/javascript">document.cookie="fram
+e=" + document.body.clientWidth + "; path=/;"; document.cookie="lastr
+equest=; path=/;"; </script></body></html>
0000

HppPromise:0005
http://www.systemsplanning.com/mwebgraphics/sp_logo.gif
http://www.systemsplanning.com/mwebgraphics/mweblogosmall.gif
http://www.systemsplanning.com/mwebgraphics/left.gif
http://www.systemsplanning.com/mwebgraphics/timeline.gif
http://www.systemsplanning.com/mwebgraphics/right.gif

HPPURL:00000585:http://www.systemsplanning.com/mwebgraphics/left.gif
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
MicrosoftOfficeWebServer: 5.0_Pub
X-Powered-By: ASP.NET
Date: Mon, 23 Feb 2004 12:42:00 GMT
Content-Type: image/gif
Accept-Ranges: bytes
Last-Modified: Thu, 19 Feb 2004 21:58:30 GMT
ETag: "e69a48233f7c31:1719df"
HppCookie: ASPSESSIONIDSQTQBAAT=NEONGEKBDEIAIANBBJGMIMPB; user=1077539
+929441957; permissions=7E5BA817E03B0418D60A; screen=1280; lastsearch=
+""; frame=1268; lastrequest=
Content-Length: 61

GIF89a 
  $ !   ,     
  i‹OPR  ;HPPURL:00000587:http://www.systemsplanning.c
+om/mwebgraphics/right.gif
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
MicrosoftOfficeWebServer: 5.0_Pub
X-Powered-By: ASP.NET
Date: Mon, 23 Feb 2004 12:42:00 GMT
Content-Type: image/gif
Accept-Ranges: bytes
Last-Modified: Thu, 19 Feb 2004 21:58:25 GMT
ETag: "7053a47f33f7c31:1719df"
HppCookie: ASPSESSIONIDSQTQBAAT=NEONGEKBDEIAIANBBJGMIMPB; user=1077539
+929441957; permissions=7E5BA817E03B0418D60A; screen=1280; lastsearch=
+""; frame=1268; lastrequest=
Content-Length: 61

GIF89a 
  $ !   ,     
  p`h;q1-yKV  ;HPPURL:00000781:http://www.systemsplanning.c
+om/mwebgraphics/mweblogosmall.gif
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
MicrosoftOfficeWebServer: 5.0_Pub
X-Powered-By: ASP.NET
Date: Mon, 23 Feb 2004 12:42:00 GMT
Content-Type: image/gif
Accept-Ranges: bytes
Last-Modified: Thu, 19 Feb 2004 21:58:36 GMT
ETag: "11cf138633f7c31:1719df"
HppCookie: ASPSESSIONIDSQTQBAAT=NEONGEKBDEIAIANBBJGMIMPB; user=1077539
+929441957; permissions=7E5BA817E03B0418D60A; screen=1280; lastsearch=
+""; frame=1268; lastrequest=
Content-Length: 246

GIF89a& )      !   ,    & ) @͌EsgRaW:T%rjn0I
+vʷ˱R>A`L:DO9銨b,54ӽ4P_L+9w#8H
+GGhńe66bX3(y6J'&DZ[ԂEkj
+(zv    y8{U+LTD֦=ڭi]uu-}S  ;HPPURL:00001952:http://www.s
+ystemsplanning.com/mwebgraphics/sp_logo.gif
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
MicrosoftOfficeWebServer: 5.0_Pub
X-Powered-By: ASP.NET
Date: Mon, 23 Feb 2004 12:42:00 GMT
Content-Type: image/gif
Accept-Ranges: bytes
Last-Modified: Thu, 19 Feb 2004 21:58:10 GMT
ETag: "b3cda27633f7c31:1719df"
HppCookie: ASPSESSIONIDSQTQBAAT=NEONGEKBDEIAIANBBJGMIMPB; user=1077539
+929441957; permissions=7E5BA817E03B0418D60A; screen=1280; lastsearch=
+""; frame=1268; lastrequest=
HPPDNS: 023,www.systemsplanning.com,30a9f180,00000000
Content-Length: 1367

GIF89a :      M hȲcO Ip L M   M DO po w  o 
+0o `J    O I   O C dP     f   O h  O  
+  dP L   h    @ dP             O           O 0o l  
      O `s@ H Open } po     .  &  C:\SP_Web Sp_logox.
+gif C    B   n &  _}.nn   . p<lBlI  
+ l|  &ʍI?    o   l  9MH H  o P,~( (
+|G>\to 09$/        H x   o   o '0 3 aW    
+D  /        R~T  0 3  Y~C:\SP_Web\Sp_logox.gif      
+-0o o &N[N.           _p_  3 
+  o o C D . ; o     O   M O        M   M O
+ @             4o A  M X  M A   A   f         @Xo   M 
+ƴȲcf   f   h  f   C h  !   ,     : @     H*\
+Ç É3jܘ#5=d8r`I")TiRI0NI8G漙&O,~i3Q/
+<ʴSD{laՐ.*j5SXI-ueԷpʝK7ڭmXԡoLp`
+ve›gz-‹p
ǵ|sőz:(h‹&:teM›u]ٵs›ƭg޳O6pc\<Sᢕkɹa
+lSTܷ5A_JYpӗ~Q=3kߞ2aA&SsG`y]_%E
+ )_b
ᅪaLn
Hա"ҷ"G->W‹$ѕ"&
keWdW    d7YݒyAdVݸdXNW‹5n8ck}I^F6%8
:$SiY9rYH݊1_~mhJ|PR*:.(:[v
+n^1
G*A*y4cj^_Ǧꫂ vh
VkmZ ;HPPURL:00001900:http://www.systemsplanning.com/mweb
+graphics/timeline.gif
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
MicrosoftOfficeWebServer: 5.0_Pub
X-Powered-By: ASP.NET
Date: Mon, 23 Feb 2004 12:42:00 GMT
Content-Type: image/gif
Accept-Ranges: bytes
Last-Modified: Thu, 19 Feb 2004 21:58:21 GMT
ETag: "f9e6f7d33f7c31:1719df"
HppCookie: ASPSESSIONIDSQTQBAAT=NEONGEKBDEIAIANBBJGMIMPB; user=1077539
+929441957; permissions=7E5BA817E03B0418D60A; screen=1280; lastsearch=
+""; frame=1268; lastrequest=
Content-Length: 1370

GIF89a        U     $  $U $ $ I  IU I I m  mU m m   U 
+    U     U ۪    U  $  $ U$ $ $$ $$U$$$$$I $IU
+$I$I$m $mU$m$m$ $U$$$ $U$$$ $U$۪$$ $U$$I  
+I UI I I$ I$UI$I$II IIUIIIIIm ImUImImI IUIII IUII
+I IUI۪II IUIIm  m Um m m$ m$Um$m$mI mIUmImImm mmUmm
+mmm mUmmm mUmmm mUm۪mm mUmm   U  $ $U
+$$I IUIIm mUmm U U U۪ 
+U   U  $ $U$$I IUIIm mUmm U
+ U U۪ U   U  $ $U$$I IUI
+Im mUmmے ےUےے۶ ۶U۶۶ U۪ U   U
+  $ $U$$I IUIIm mUmm U U 
+U۪ U!   ,     @     H*\ȰÇ#JH
+‹3j܈!    d3P?M2H'ale͘7gڤsO=)(ѣMYriPL
+>IUЪSzU+Ԭ0\t²a+۬p}+.]l*mW
LxᶈbhX-8sg<H̠7k:Ԭm5mz)^Ɔ›s߻
+nƓ;XQ?^\:qCit߻S4|!\xvt
+ѽK_sh&6F(V`mvj(u(ۇa$h(*8bvq!m+
+袍,7}tniz|)$LK679%RVISfiXu^HI[difl
+ɝZ^BBh't?ɣ@{Tg&
.bz+UVvmYjfڦnrY&(cu
~ꩪB7G{h2=k*lJ,e6*:;&GV^‹%
+ ;

[download]

Replies are listed 'Best First'.
Re: Embedded GIFs not embedded
by Corion (Patriarch) on Feb 23, 2004 at 13:58 UTC

    You don't give us much to work on. We need to see a minimal working piece of your code that produces this behaviour.

    One thing that could possibly cause this behaviour could be some bad handling of the HTTP/1.1 connection, but very few clients speak HTTP/1.1 and get that wrong.

    A second thing might be that you are writing the images to the client from your Perl script in one go - this is not how HTTP works.

    So please post a small snippet of your Perl code that produces this behaviour.

[reply]
Re: Embedded GIFs not embedded
by fireartist (Chaplain) on Feb 23, 2004 at 13:57 UTC
    There's no such thing as 'embedding' a gif within a webpage.
    You have to set the image href to a URL. - This may be a 'real' gif file, or a program which prints out the binary data.
    example 
    <html>
<body>
<img href="/cgi-bin/photo.cgi?id=1"><br>
<img href="/cgi-bin/photo.cgi?id=2">
</body>
</html>

    [download]
[reply]
[d/l]
[reply]
        When I last noticed those, and experimented with them, I found they worked on some browsers, and not others, and especially not my favorite browser at the time (although I've switched favorites around that time, so I can't tell you which it was).

        So, I'd be wary of suggesting such a solution, which also doesn't have a graceful fallback if it isn't supported.

        -- Randal L. Schwartz, Perl hacker
        Be sure to read my standard disclaimer if this is a reply.

[reply]
Re: Embedded GIFs not embedded
by jdtoronto (Prior) on Feb 23, 2004 at 14:22 UTC
    And even less to go on when we can load the URL using our own browsers without any problems. The img tags I can see in your output are relative references to the files. Sometimes this is inadequate when you are browsing from within the same network. But we really do need to see code that produces 'the problem' you think you are having.

    jdtoronto

[reply]
[d/l]
      Thanks to all who have replied so far.

      This app is a search engine with complex displays, and comprises 25 large perl files and hundreds of subs, so showing the relevant code is not possible. However, that gives me the idea of constructing a minimal program that exhibits the problem -- a well-known debugging trick that I forgot momentarily!

      I was hoping someone had seen this problem before, or could diagnose it from the server output and what I said about the header. I've never seen it in 8 yrs of CGI programming in C++. It's the Perl and CGI.pm that are new to me.

      I suspect it's something about the header I am sending, since the HTML output the server is sending is correct. Can anyone tell me if the default CGI.pm header as described in the original question is sufficient?

      Thanks! Stephen Toney

[reply]
Re: Embedded GIFs not embedded
by zentara (Cardinal) on Feb 23, 2004 at 17:16 UTC
    This is a wild shot, but maybe you need to use the "cid" tag like html mail does, which attaches images to the html. Like Merlyn, I recall a while back, I did get inline-images to work in plain html(but it was probably Netscape 4) and it dosn't work now with Mozilla.

    In html mail, you need to do something like this: 

    # Attach the HTML content 
my $message_body = '<html><body><H3>Hello world! 
   <img src="cid:myid.gif"></H3></body></html>';

$mime_msg->attach(Type => 'text/html',
                  Data => $message_body);

# Attach the image 
$mime_msg->attach(
   Type => 'image/gif',
   Id => 'myid.gif',
   Encoding => 'base64',
   Path => 'pikachu.jpg');

    [download]
    I'm not really a human, but I play one on earth. flash japh
[reply]
[d/l]

Back to Seekers of Perl Wisdom