Image source for fpWeb / Brook Framework
lazarus / 38-Networking and Web Programming
----------------------------------------------------------------------
RedOctober · 2021-04-11 16:26
Platform: Lazarus 2.0.10 FPC 3.2 running Brook 5 Framework app
running on Windows Server 2016
Problem: I'm "AResponse" -ing Html pages that have image tags. Those
tags require sources. I can't use:
file:///
because that points to the end user's file system. So I tried putting
the image file in the same folder as the app .exe then just pointing
the image tag to the root folder of the app .exe:
Nope, still no good.
I'm assuming both fpWeb and Brook 5 Framework will use the same
solution, since both of them are sending HTML to an end user on a
browser that needs image tags to point to something on the server.
Question:
- How can I display images on my end user's browser with the above
mentioned server? (at all)
- How can I display images on my end user's browser with the above
mentioned server? (from a folder of my choosing on my server)
Thanks in advance.
----------------------------------------------------------------------
Gustavo 'Gus' Carreno · 2021-04-11 16:42
Hey RedOctober,
From what you're telling us I think you wan to find out how to serve
static files.
From a quick Google on "fpweb serve images" I got:
- A link to this forum:
https://forum.lazarus.freepascal.org/index.php/topic,45562.0.html
- The wiki entry "fpWeb Tutoruial", section 12.3 (Serving static
files): https://wiki.freepascal.org/fpWeb_Tutorial#Serving_Static_File
s_.28Embedded_Web_Server.29
Hope that helps you solve your issue.
Cheers,
Gus
----------------------------------------------------------------------
lucamar · 2021-04-11 19:25
Can't you put the images alongside the HTML pages and use relative
URIs? I mean, can't you use something like (for example):
Code: HTML5 [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i 
That would be IMHO an ideal solution.
----------------------------------------------------------------------
RedOctober · 2021-04-11 21:22
Hi lucamar,
Yes, that is what I was thinking too. Doesn't work that way. I also
tried putting a / in front, like...
That doesn't work either. Still stuck.
----------------------------------------------------------------------
lucamar · 2021-04-11 22:10
Quote from: RedOctober on April 11, 2021, 11:22:32 pmHi lucamar,
Yes, that is what I was thinking too. Doesn't work that way. I also
tried putting a / in front, like...
That doesn't work either. Still stuck.
Putting a slash in front of the URI would only work if the images were
in directory "image" directly under the root of your server.
The question, really, is that if to access your page you have to type
something like:
Code: [Select]http://myserver/scripts/gimmethepage, any relative URI
in the generated page will end up having "http://myserver/scripts/" in
front, so you have to take that into account to know where to put the
images.
Of course, if "scripts" is a virtual directory (i.e. something that
gets translated out of the "static" content root folder, as usually
happens with e.g. Apache which redirects to a special cgi-bin folder)
then a generated (by the browser) URI like:
http://myserver/scripts/images/somejpeg.jpg will get interpreted by
the server as something like: "look in cgi-bin for the script called
'images' and pass to it a parameter 'somejpeg.jpg'". Imagine the
result if there is no "images" script!
What you should probably do is to put the images inside some folder in
the static-content section of your server and use a normal URI for
them, so if you put a static page "test.html" in the servers root
containing:Code: HTML5 [Select][+][-]window.onload = function(){var
x1 = document.getElementById("main_content_section"); if (x1) { var x
= document.getElementsByClassName("geshi");for (var i = 0; i 
and put 'test.jpg'
inside a folder "images" it would work.
Alternatively, you could add a handler for:
"http://myserver/scripts/images" and make it return the image file
represented by the parameters from wherever it's stored.
----------------------------------------------------------------------
PierceNg · 2021-04-12 01:17
Quote from: RedOctober on April 11, 2021, 06:26:08 pmProblem: I'm
"AResponse" -ing Html pages that have image tags. Those tags require
sources. I can't use:
Is the HTML returned from your server to the browser dynamically
generated by your Brook application or a static HTML file read from
disk?
Quote from: RedOctober on April 11, 2021, 06:26:08 pmI'm assuming both
fpWeb and Brook 5 Framework will use the same solution, since both of
them are sending HTML to an end user on a browser that needs image
tags to point to something on the server.
For a web server or web application to serve static content, one
configuration item is the directory on the server from which the
static content is sourced.
For fpWeb, that is the procedure fpwebfile.RegisterFileLocation:
Code: Pascal [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i // use this
to map locations (relative to BaseURL of the application) to physical
directories.// More than one location can be registered. Directory
must exist, location must not have / or \Procedure
RegisterFileLocation(Const ALocation,ADirectory : String);
Brook will have its own mechanism. If your Brook application is able
to serve static HTML, then it will as easily serve static image files.
----------------------------------------------------------------------
RedOctober · 2021-04-15 21:46
Hi All, to finish off this thread... I have received instruction from
Silvio (Brook 5 Framework author) how to do this. The code snippet
below is not from him, it's from my project. It just tests to see if
the request is for a .jpg filename, and if so, it downloads the file.
Code: Pascal [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i var idx:
Int64; pth, fnm: String; ... idx := High(ARequest.Paths); pth :=
';' + ARequest.Paths[idx] + ';';... fnm := StringReplace(pth, ';',
'', [rfReplaceAll]); // Determine if the request is for an image
contained in an HTML ![]()
tag fnm := StringReplace(pth, ';', '',
[rfReplaceAll]); if Pos(ExtractFileExt(fnm), ';.jpg;.png;.bmp;') > 0
then begin fnm := (your path to your images on your hard
drive) + '/' + fnm; AResponse.Download(fnm); Exit; end;
brk_rtr.Route(ASender, ARequest, AResponse);
The image tag scr= attribute value has to be a full URL similar to
below: