Search code examples
imageprologswi-prologhttpserver

How to include an image in an HTML page served dynamically by Prolog?


If I've bound my Prolog HTTP server to localhost at port 9000, how can I make Prolog generate the right path for my images? For example, if my .pl files and .jpg or .png files are located on the desktop, how do I make the server generate HTML code like this:

<img src="C:\Users\Luka\\Desktop\ImageName.ext"/>

The ext part stands for extension. I've taken a look at the documentation of SWI-Prolog and this tutorial, but I find all that abstract paths very confusing. I've got a lot of experience with web servers, but this is a lot different and I'm having awful problems understanding it.

Here is my try, composed of what I've learnt (or at least I think I have) throughout the SWI-Prolog documentation and the above-mentioned tutorial:

:- use_module(library(http/thread_httpd)).
:- use_module(library(http/http_dispatch)).
:- use_module(library(http/http_parameters)).
:- use_module(library(http/html_write)).
file_search_path('*', 'C:\\Users\\Luka\\Desktop\\').

server(Port) :-
    http_server(http_dispatch, [port(Port)]).

:- http_handler(root(.), render_base, []).
:- http_handler('/form', process_form, []).

process_form(Request) :-
    http_parameters(Request,
            [name(Name,[atom])]),
            reply_html_page('Posted data: ',['',Name]).

render_base(_Request) :-
    reply_html_page(
        title('Naslov'),
        img([src='/image.png', alt='Incident'])
    ).

Thanks again in advance for your huge patience. :-)


Solution

  • It's true that's not simple to solve your problem. Please read carefully this 'how to' page, section Serving many 'server support' files.

    Here is the code I tested:

    http:location(images, root(images), []).
    user:file_search_path(icons, '/home/carlo/prolog').
    :- http_handler(images(.), serve_files_in_directory(icons), [prefix]).
    

    and the HTML that uses that resources

    intro -->
        html([p(ol([li('select a path'),
                li('scan resources from it'),
                li('RDF-ize them'),
                li('browse with foldable SVG')
               ])),
              \sep,
              'png before', img(src='images/swipl.png'), 'png after',
              \sep,
              'jpeg before', img(src='/images/swipl.jpeg'), 'jpeg after'
             ]).
    

    I note that both specifications img(src='images/swipl.png') and img(src='/images/swipl.jpeg') work, and this 'feature' contributes to blurry the interface behaviour.

    Here the output

    enter image description here

    HTH