No pics in my PDF created with PdfKit on heroku

I've an app which works fine in development and on my current production server.

I want to move it to FREE heroku (basic config: 1 dyno, 1 worker).

Unfortunately, the pdf generation (using PdfKit) is ok BUT without the pictures defined in my CSS.

I've followed a lot of tips including:

• http://blog.mattgornick.com/using-pdfkit-on-heroku

• http://jguimont.com/post/2627758108/pdfkit-and-its-middleware-on-heroku

• http://开发者_开发知识库code-fu.pl/blog/2011/05/17/pdfkit-heroku

Thoughts?

Found a workaround but I am still eager to know a better option:

• I duplicated my view: one dedicated for html, another for pdf.

• I removed all css using pics and put it in a separate file, included only in the view dedicated for html

• finally, I inserted the css in the view dedicated to the pdf:

  .foo { background-image:url(<%= Rails.root %>/public/images/bar.png) }

Very Ugly but works so please tell me if you've better

It's probably an issue with the way the url's are specified in the css. As I recall, they should be file system absolute paths. What does your css look like?

Here is how I answered my needs with:

• Just one single view file

• Just one css file

The trick was to pass the proper base_url to the css file dynamically, given I expected a pdf or html.

I decided to use LESS. Style compiles css in a different manner, given the base-url I provide in the DOM. This base-url is generated by a helper.

Here were my steps:

• changed my style.css to style.less

• Added to my view:

<%= stylesheet_link_tag "style.less", :rel => "stylesheet/less" %>

<script id="base_url" type="text/javascript" data="<%= assets_path %>"></script>

<%= javascript_include_tag "less.min.js" %>

• In my helper:

  def assets_path
    if request.fullpath.include? ".pdf"
      "#{Rails.root.join('public',"images","pictos")}"
    else
      "#{request.protocol}#{request.host_with_port}/images/pictos"
    end
  end

• and in my style.less:

@base_url: `document.getElementById('base_url').getAttribute('data')`;

.foo { background-image:~"url(@{base_url}/bar.png)" }