Display text and image on same page

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

Hello , i have a simple script that displays information in table format , and above the the table i want to display graphic (in .png) format. I think my problem is with the header but could not figure how to do it . Here is part of the script :

 print "Content-type: text/html\n\n ";
print "<html> \n";
print "<head> Network </head>\n";
print "<body>\n";
print "<img src=/var/www/grafika/graphHour.png width=400 height=200>\n
+";
print "<table style=width:70%>\n";
print "<tr>\n";
print "<th>Interface</th>\n";
.
.
.
[download]

Comment on Display text and image on same page Download Code

Replies are listed 'Best First'.
Re: Display text and image on same page by haukex (Archbishop) on Jan 11, 2019 at 12:03 UTC
The `<img>` tag's `src` needs to be a URL, not a filename on the server. So it depends on what your webserver is configured to use as the document root - i.e. which directory on the server files are served from when the user visits `http://www.example.com/`. If the document root is for example `/var/www`, then you could maybe use `<img src="/grafika/graphHour.png" ...` (although depending on how your site is set up, relative URLs might be better). By the way, it'd be better if you didn't generate HTML like this. I recommend you look into e.g. HTML::Tiny, Template::Toolkit, or maybe even a web framework, such as Mojolicious.	[reply] [d/l] [select]
Re: Display text and image on same page by kschwab (Vicar) on Jan 13, 2019 at 15:09 UTC
It looks like the image is a graph that changes all the time, so using an inline base64 encoded image might make sense here. Something like: `#!/usr/bin/perl use strict; use warnings; use MIME::Base64 qw(encode_base64url); my $img="/var/www/grafika/graphHour.png"; open(IMG,$img) or die "Can't open $img: $!\n"; my $imgdata; {local $/=undef;$imgdata=<IMG>;} close IMG; my $b64=encode_base64url($imgdata); print "Content-type: text/html\n\n "; print "<html> \n"; print "<head></head>\n"; print "<body>\n"; print "<img src='data:image/png;base64,$b64'>"; print "</body></html>"` [download]	[reply] [d/l]
Re^2: Display text and image on same page by afoken (Chancellor) on Jan 14, 2019 at 06:45 UTC
inline base64 encoded image Bad news: Still not supported by all browsers (details). As usual, Microsoft's browser implementations cause trouble. Alexander -- Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so". ;-)	[reply]
Re^3: Display text and image on same page by kschwab (Vicar) on Jan 14, 2019 at 12:47 UTC
It works fine on IE and Edge, since IE9, for this specific use case of the src element of an img tag. The only restriction is that it must be less than 4GB. That's described on the page you linked. There are other limitations for different use cases, but not this one.	[reply]
Re: Display text and image on same page by bachoA4o (Sexton) on Jan 13, 2019 at 20:22 UTC
Thanks for the answers but the problem was with the directories of the web server , not with the script . My dir was outside of the document dir and could not serve content from it .	[reply]
Re^2: Display text and image on same page by kschwab (Vicar) on Jan 14, 2019 at 20:32 UTC
Seems doubtful that your webserver is supposed to have a document root of '/', such that an image with a url of '/var/www/grafika/graphHour.png' would work. But, sure, ok.	[reply]