search

astefanutti / decktape

PDF exporter for HTML presentations
MIT License
2.19k stars 176 forks source link

Problem with relative paths of images #85

Closed pat-s closed 7 years ago

pat-s commented 7 years ago

decktape fails to find all images. Engine: remark.js 

~/tools/decktape-1.0.0/phantomjs ~/tools/decktape-1.0.0/decktape.js ~/Servers/GIServer/PhD/R/presentations/AK-TQMG/AK-TQMG.html ~/Servers/GIServer/PhD/R/presentations/AK-TQMG/AK-TQMG.pdf

Loading page /Users/pjs/Servers/GIServer/PhD/R/presentations/AK-TQMG/AK-TQMG.html ...
+- Unable to load resource from URL: file:///AK-TQMG/img/gdal-overview.png
|_ Error code: 203
|_ Description: Error opening /AK-TQMG/img/gdal-overview.png: No such file or directory
+- Unable to load resource from URL: file:///AK-TQMG/img/sp_example_image.png
|_ Error code: 203

I tried to insert full paths instead of relative paths pointing to the images -> same error

My HTML slides are fine.

astefanutti commented 7 years ago

I haven't been able to reproduce the issue with a simple img tag with a relative path. Could you please share your example or at least a minimal presentation that produces the error? From the error, it looks like PhantomJS tries to load the image from the /AK-TQMG/img/gdal-overview.png absolute path, which I understand is not expected. How do you declare your img element?

pat-s commented 7 years ago

I tried full paths yesterday and for some reason it did not work.

I tried full paths again now - and for some reason it did work :laughing: :sweat_smile:. Not sure what I did wrong yesterday.

So yeah, its caused by the relative image path of my html output. Everything fine with decktape. I was able to run decktape without errors now. I use xaringan with remark as engine.

Reference for xaringan #27

astefanutti commented 7 years ago

Good to hear! Thanks for the update!

pat-s commented 7 years ago

@astefanutti According to this comment it shall be related to decktape. Is there any way that decktape can support relative paths?

Reference issue

astefanutti commented 7 years ago

AFAIK, relative paths work in PhantomJS, hence in DeckTape. I've tried it multiple times without an issue, though you may have some more complex cases. Would you be able to share your example or at least a minimal presentation that produces the error?

From the error, it looks like PhantomJS tries to load the image from the /AK-TQMG/img/gdal-overview.png absolute path, which I understand is not expected. How do you declare your img element?

pat-s commented 7 years ago

Here are the html file and the images: Files.zip

Can you reproduce the error with these file? If you need more info/help, just say so :)

I declare the images as follows

<figure>
    <img src='/path/to/image.png' />
    <font size="2">
    <figcaption> some caption
    </figcaption>
    </font>
</figure>
astefanutti commented 7 years ago

As the presentation is loaded from the file system, PhantomJS translates the following path:

<img src='/path/to/image.png' />

To:

<img src='file:///path/to/image.png' />

As it interprets the leading forward slash as specifying an absolute path.

Could you try by removing the leading forward slash?

pat-s commented 7 years ago

When doing so, the images in my html output are not found. They are only found with the leading slash.

Nevertheless, when manually applying the fix you mentioned in the html file, I get the following error:

Loading page /Users/pjs/Servers/GIServer/PhD/R/presentations/AK-TQMG/AK-TQMG.html ...
+- Unable to load resource from URL: file:///Users/pjs/Servers/GIServer/PhD/R/presentations/AK-TQMG/AK-TQMG/img/gdal-overview.png
|_ Error code: 203

For some reason, the full path is taken although the image is specified as AK-TQMG/img/gdal-overview.png in the html file. Checked several times to make sure that I did not call decktape on the wrong html.

The only approach that works is when applying the full path /Users/pjs/Servers/GIServer/PhD/R/presentations/AK-TQMG/img/... manually in the html. (Rendering the html with relative paths and manually changing all relative paths to full paths).

astefanutti commented 7 years ago

I've updated the paths by removing the leading slashes and have been able to produce the following PDF: test.pdf.

Please find the updated project: test.zip so that you'll be able to adapt yours.

For some reason, the full path is taken although the image is specified as AK-TQMG/img/gdal-overview.png in the html file. Checked several times to make sure that I did not call decktape on the wrong html.

Note that PhantomJS reports the absolute path for troubleshooting purpose even if the provided path is relative.

In the error that you have, you see that you have the AK-TQMG directory duplicated in the path:

file:///Users/pjs/Servers/GIServer/PhD/R/presentations/AK-TQMG/AK-TQMG/img/gdal-overview.png

I am going to close this as this confirms that works it similarly between the browser and the exported PDF. Let me know if you need anything else.

pat-s commented 7 years ago

@astefanutti Thanks for testing!

Am I right that the relative path of the 'img' folder has to be specified relative to the html file directory for decktape to work and needs to be without leading slashes?

While manually adapting the image path is working, its tedious. So it makes no difference if I change it to the full path or adapt the relative path -> adaption is always needed. The problem (I guess) is that the html file produced using xaringan refers to one directory above the resulting html file. That´s because the root of the function which produces the slides is located there. So its not surprising that decktape cannot find the relative img path then.

Also, for some reason, I need leading slashes in the relative paths so that xaringan is able to find the images. However, this will then always break decktape because of the file:// prefix.

A sufficient solution would be that I can just take my xaringan html file without manual path modification. I´ll try to build a bridge between both tools to see how we can integrate both so that conversion will work out of the box.

astefanutti commented 7 years ago

Am I right that the relative path of the 'img' folder has to be specified relative to the html file directory for decktape to work and needs to be without leading slashes?

Your understanding is correct. This is what Web browsers would to in general.

Also, for some reason, I need leading slashes in the relative paths so that xaringan is able to find the images. However, this will then always break decktape because of the file:// prefix.

This looks more like a limitation of the tool. Maybe you could serve your presentations with a local Web server with the document root serving the presentation directory. That way you may be able to keep the leading slash...

pat-s commented 7 years ago

I just tried again to set relative image paths (without leading slashes) to the html root dir when producing the html file with xaringan and - it worked now.

That is strange to me. I can not reproduce the errors I had before during so many attempts (including several software + PC restarts).

decktape is fine, many thanks to your quick replies here and sorry for stealing so much time :sweat:

astefanutti commented 7 years ago

Great. I'm glad it works for you now!