Forum Documentation

How to load background images via css while generating pdf

adkumar
Post upgrading Prince to 13.6 , we are getting below error while loading background images via css while generating pdf:

loading image: /assets/logo_.svg
: debug: error loading resource: No such file or directory

The fix for that I figured out is to use fileroot Input Option while generating pdf, and passing our public path to it (https://www.princexml.com/forum/topic/961/resolve-absolute-urls-to-images-and-css?p=1#3870)

But in the documentation its mentioned using fileroot is deprecated https://www.princexml.com/doc/command-line/#input-options .

And its suggested to use --remap option instead https://www.princexml.com/forum/topic/4675/what-is-alternative-to-setfileroot-api-in-prince-v-14?p=1#23570


But we are still getting same error even on using remap and baseurl together like suggested
loading image: /assets/logo_.svg
> : debug: error loading resource: No such file or directory
we added the command like suggested: prince --baseurl=http://www.example.com --remap=http://www.example.com= /public/
mikeday
You should be seeing a warning message which shows which path it is trying to load, can you see how it is incorrect compared with what you expect?
adkumar
hi , when we use fileroot (and passing the public path ex /usr/local/xyz/abc/public/), can see this in the logs:

debug: loaded resource: /images/draft.jpg

the image is inside /usr/local/xyz/abc/public/images/draft.jpg

and when using baseurl + remap (prince --baseurl=https://example.com --remap=https://example.com=/usr/local/xyz/abc/public/ --style= ....), we can see below logs:

Preparing document...
Fri Jun 14 06:50:56 2024: loading image: /images/draft.jpg
Fri Jun 14 06:50:56 2024: debug: error loading resource: No such file or directory
Fri Jun 14 06:50:56 2024: /images/draft.jpg: warning: can't open input file: No such file or directory
mikeday
The logs should include some information about the URL remapping and the original image URL should be relative to the base URL, like this:
prince: loading image: https://example.com/images/draft.jpg
prince: debug: remapping `https://example.com/images/draft.jpg` to `/home/mikeday/temp/images/draft.jpg`
prince: debug: error loading resource: can't open input file: No such file or directory
prince: /home/mikeday/temp/images/draft.jpg: warning: can't open input file: No such file or directory (remapped from `https://example.com/images/draft.jpg`)

So it appears that either the command line options are not being applied or /images/draft.jpg is not being referenced from the main document. Can you try with a simple test document containing a single image element, like this:
<img src="/images/draft.jpg">

Then run Prince with these options:
prince --debug --baseurl=https://example.com --remap=https://example.com=/usr/local/xyz/abc/public/

The debug log should then include various lines mentioning the remapping as displayed above, and the image URL should include the https://example.com.
adkumar
The image is in /Users/adkumar/mom_project_code/momentum-upgrade-latest/public/images/draft.jpg


I tried by putting only minimum test html , css code ,When I give :

Html:

<div class="draft">
</div>


prince --style=/Users/adkumar/mom_project_code/momentum-upgrade-latest/test2.css --baseurl=http://example.com --remap=http://example.com=/Users/adkumar/mom_project_code/momentum-upgrade-latest/public/ --debug --log=/Users/adkumar/mom_project_code/momentum-upgrade-latest/log/pdf.log test2.html -o public/output_docs/test2.pdf

With test2.css having :
background: url("./public/images/draft.jpg") no-repeat top;

It works :

Jun 28 14:07:26 2024: loading image: /Users/adkumar/mom_project_code/momentum-upgrade-latest/public/images/draft.jpg
Fri Jun 28 14:07:26 2024: debug: loaded resource: /Users/adkumar/mom_project_code/momentum-upgrade-latest/public/images/draft.jpg

But above works without baseurl, remap, fileroot options as well, so I think giving ./ it picks the current project’s path, and so it works , but the above url we cannot use as it will not work with html preview


When I put :
background: url("/images/draft.jpg") no-repeat top;

It doesn’t works:

Fri Jun 28 14:47:04 2024: loading style sheet: /Users/adkumar/mom_project_code/momentum-upgrade-latest/test2.css
Fri Jun 28 14:47:04 2024: debug: loaded resource: /Users/adkumar/mom_project_code/momentum-upgrade-latest/test2.css
Fri Jun 28 14:47:04 2024: debug: loaded resource: type: no
Fri Jun 28 14:47:04 2024: Preparing document...
Fri Jun 28 14:47:04 2024: loading image: /images/draft.jpg
Fri Jun 28 14:47:04 2024: debug: error loading resource: No such file or directory
Fri Jun 28 14:47:04 2024: /images/draft.jpg: warning: can't open input file: No such file or directory
Fri Jun 28 14:47:04 2024: Converting document...



Also I tried using image like you suggested:
<img src="/images/draft.jpg">

That works like you suggested:

Fri Jun 28 14:25:44 2024: loading image: http://example.com/images/draft.jpg
Fri Jun 28 14:25:44 2024: debug: remapping `http://example.com/images/draft.jpg` to `/Users/adkumar/mom_project_code/momentum-upgrade-latest/public/images/draft.jpg`
Fri Jun 28 14:25:44 2024: debug: loaded resource: http://example.com/images/draft.jpg


So is it that this baseurl and remap combination only works with img source and not with css

adkumar
Hi @mikeday , can you help me here , below is the example code which is not picking up the remap:

html:
<html >
  <body>
    <div class="draft">
    </div>
  </body>
</html>


css:
.draft {
  background: url("/images/draft.jpg") no-repeat top;
}


command:
prince  --style=/Users/xyz/test2.css --baseurl=http://example.com --remap=http://example.com=/Users/xyz/public/ --debug --log=/Users/xyz/log/pdf.log test3.html -o test2.pdf

in log file , its giving:
debug: error loading resource: No such file or directory
Wed Jul  3 19:43:37 2024: /images/draft.jpg: warning: can't open input file: No such file or directory


image is in /Users/xyz/public/images/draft.jpg ,

but if I use <img src="/images/draft.jpg"> inside html, thats getting picked up fine, logs:

Wed Jul  3 19:53:06 2024: loading image: http://example.com/images/draft.jpg
Wed Jul  3 19:53:06 2024: debug: remapping `http://example.com/images/draft.jpg` to `/Users/xyz/public/images/draft.jpg`
Wed Jul  3 19:53:06 2024: debug: loaded resource: http://example.com/images/draft.jpg

mikeday
The issue is that the CSS is linked from the command-line and not the HTML file, so it will not have a HTTP base URL and will not be remapped.

One way of solving this would be to remap http://example.com to /Users/xyz, then you could specify the CSS file as http://example.com/test2.css and it would be remapped correctly along with the images that it links to.