Images don't show up visually in the document

[malagant]

Hi all,

I work on a Rails 5 API project with ruby 2.2.2 and no matter if I try to embed a JPG or PNG from the prawn DATADIR or from my own resources (with absolute path), images don't show up in the document. However, they appear in the pdf object but not visually in the rendered pdf. I can play with :fit and :width and :height but no change either.

Has anyone seen this beforen?

[pointlessone]

@malagant Hello,

Could you please provide sample code and a generated PDF for examination?

[malagant]

@pointlessone Thank your for getting into this. :)

Here is a recent pdf file:
Recipe-1 (1).pdf

And here is the code:

class BasePdf < Prawn::Document
  include ActionView::Helpers::NumberHelper
  include ActionView::Helpers::TextHelper

  BLACK = '000000'.freeze

  def initialize(default_prawn_options = {})
    super(default_prawn_options)
    font_size 10
    define_grid columns: 10, rows: 100
  end

  def render_recipes(recipes)
    recipes.each do |recipe|
      render_recipe(recipe)
      # start_new_page
    end
  end

  def render_recipe(recipe)
    render_header recipe
    render_body recipe
    render_footer
  end

  private

  def render_header(recipe)
    rows = [[recipe.title, { content: "Created: #{I18n.l recipe.updated_at, format: :short}", align: :right }]]
    table rows do |t|
      t.width = 540
      t.cells.border_width = 0
    end
  end

  def render_body(recipe)
    render_title(recipe.title)
    render_subline(recipe)
    render_images(recipe.recipe_images)
    render_ingredients(recipe.recipe_ingredients)
    render_preparations(recipe.preparations)
  end

  def render_title(title)
    table [[title]] do |t|
      t.width = 540
      table_bounds_border(t)
      t.rows(0).font_style = :bold
      t.rows(0).font_style = :bold
      t.columns(0).align = :center
    end
  end

  def render_subline(recipe)
    rows = []
    rows << [
      "Ingredients for #{recipe.quantity} #{recipe.title}",
      "Level: #{recipe.difficulty.title} / Preparation Time: #{recipe.preparation_time_in_minutes} min."
    ]

    table rows do |t|
      t.width = 540
      table_bounds_border(t)
      t.rows(0).font_style = :bold
      t.columns(0).align = :left
      t.columns(1).align = :right
    end
  end

  def render_images(recipe_images)
    rows = []

    rows << recipe_images.map do |img|
      { image: img.image.path, height: 100, width: 108 }
    end

    table rows do |t|
      table_bounds_border(t)
    end
  end

  def render_ingredients(recipe_ingredients)
    rows = []

    recipe_ingredients.each do |ingredient|
      case ingredient.element_type
        when 'Freetext'
          rows << ['', { content: ingredient.element.content, colspan: 2 }]
        when 'Ingredient'
          rows << [
            { align: :right, content: ('%g' % ('%.2f' % ingredient.quantity)).to_s },
            { content: ingredient.ingredient_unit.title.to_s },
            { content: ingredient.element.title.to_s }
          ]
      end
    end

    table rows do |t|
      t.width = 540
      table_bounds_border(t)
    end
  end

  def render_preparation_title
    table [['Preparation']] do |t|
      t.width = 540
      t.columns(0).align = :center
    end
  end

  def render_preparations(recipe_preparations)
    render_title('Preparation Steps')
    table_content = []

    recipe_preparations.each_with_index do |preparation, index|
      table_content << [{ content: (index + 1).to_s, font_style: :bold }, preparation.content]
    end

    table table_content do |t|
      t.width = 540
      table_bounds_border(t)
    end
  end

  def render_footer
    grid([99, 0], [99, 9]).bounding_box do
      number_pages 'Page <page> / <total>', align: :right
    end
  end

  def table_bounds_border(table)
    table.cells.border_width = 0
    table.before_rendering_page do |page|
      page.row(0).border_top_width = 1
      page.row(-1).border_bottom_width = 1
      page.column(0).border_left_width = 1
      page.column(-1).border_right_width = 1
    end
  end
end

[garrettstott]

Hey @malagant,

Did you ever figure this out? I'm having the same issue.

Even doing something very simple:

Prawn::Document.generate(filename) do
  text "Image"
  image  "#{Rails.root}/app/assets/images/logo-black.jpg"
end

I'm not getting any errors. I've tried different images, putting them in different paths. I cannot get the image to show.

[gettalong]

@garrettstott Alas, the PDF provided by @malagant is not a valid PDF (the cross-reference table is invalid) and he provided no useful sample code that can be executed locally (i.e. without rails). If you provide such a sample code (similar to what you already provided but including all resources), it will be easier to see where the problem is.

[joewestcott]

I'm getting issues with images of one bit depth at the moment, could it be that the image you are using @garrettstott has a one bit depth too? (I'm assuming it might due to being called "logo-black.png") If you could link us to it, or just post the output of
gm identify -verbose /app/assets/images/logo-black.jpg
that might help narrow it down. You need graphicsMagick or imageMagick to do so.

[Volosh1n]

Hi!
Faced the same issue. Any news?

[pointlessone]

@Volosh1n Could you please provide a sample script that would demonstrate the issue, with the problematic image attached?

[gettalong]

The file from comment #994 (comment) has the following problems:

qpdf --check Recipe-1.1.pdf
WARNING: Recipe-1.1.pdf: file is damaged
WARNING: Recipe-1.1.pdf (offset 412471): xref not found
WARNING: Recipe-1.1.pdf: Attempting to reconstruct cross-reference table
checking Recipe-1.1.pdf
PDF Version: 1.3
File is not encrypted
File is not linearized
WARNING: Recipe-1.1.pdf (object 8 0, offset 411714): expected endstream
WARNING: Recipe-1.1.pdf (object 8 0, offset 7003): attempting to recover stream length
WARNING: Recipe-1.1.pdf (object 8 0, offset 7003): recovered stream length: 736598
WARNING: Recipe-1.1.pdf (offset 734043): error decoding stream data for object 8 0: Not a JPEG file: starts with 0xef 0xbf
WARNING: Recipe-1.1.pdf (offset 734043): stream will be re-processed without filtering to avoid data loss

@Volosh1n Have you tried generating the file locally, ie without download via a web server?

[Volosh1n]

@pointlessone, we have an API application, which has endpoint to print PDF. Everything works fine when I send request on that endpoint via Postman. But if I do the same via our frontend app, I got fine PDF, but without images on it.
This is the part of PDF I get via Postman (yes, this is an actual image there, grey square. Just fixture):

The same part I get via frontend:

We use Shrine to store images. This method generates hash for image to be placed in PDF:

We send PDF via send_data method. Frontend downloads it via js-file-download.

@gettalong, yes, I've tried, file has images, everything is OK.

I thought the problem caused by js-file-download, but then I found this issue.

[pointlessone]

I'm not quite sure if this a Prawn issue. I suspect the image you pass to Prawn is not quite right. Prawn might swallow the error and it's OK to blame it for that but the root cause might be not in Prawn.

Could you please validate that you get a proper image right before you pass it to Prawn? Is it an IO instance (e.g. a File or StringIO, etc.)? Is there actual image data in it (e.g. it's length is more than 0, you can spot a proper image header magic JFIF, PNG, etc. near the start of the data)?

[Volosh1n]

@pointlessone, yes, this is a valid file.

The most confusing part for me: Postman downloads good PDF with needed image, while browsers does not.

[gettalong]

@Volosh1n Can you provide both files, i.e. the one downloaded via the web frontend and the one via Postman? If that is not possible, can you binary-diff the PDFs to see where the differences are? It seems very probable that the web frontend only downloads part of the PDF.

[gettalong]

One more thing regarding the PDF from #994 (comment): There is a suspicious character sequence \357\277\275 inside the data of the image stream and in the PDF header.

Analysing further pdf-core uses \xFF\xFF\xFF\xFF as binary signature after %PDF-1.3. And the mentioned sequence is repeated four times, the exact number of \xFF values. Therefore I guess that something processing the PDF (the sender transmitting or the client receiving the file) wrongly converts \xFF into the mentioned character sequence, thereby invalidating the PDF.

[Volosh1n]

@gettalong @pointlessone
Sorry for long response.
The reason was: front-end parsed all the responses from back-end like json. For this exact endpoint front-end needed to parse response like 'blob'. After that, images became shown! Sorry for bothering and thank you for you attention to my problem!