markdown-to-pdf icon indicating copy to clipboard operation
markdown-to-pdf copied to clipboard

No images in the pdf file

Open keith-moore-bluefruit opened this issue 4 years ago • 10 comments

I have a markup document that has 'mermaid' diagrams.

I use 'compile-mermaid-markdown-action' to produce 'png' image files. The '.md' files are in a 'documentation' folder. The '.png' files are in a 'documentation/images' folder.

When I run 'markdown-to-pdf' the generated 'html' files work (they have a link to the 'images' folder png files. But, the pdf file doesn't contain any images.

The link sin the '.md' file are like: ~mermaid diagram 1~

I use the following configuration: - name: Generate PDF Document uses: baileyjm02/markdown-to-pdf@v1 with: input_dir: documentation output_dir: documentation images_dir: documentation build_html: true

keith-moore-bluefruit avatar May 19 '21 15:05 keith-moore-bluefruit

Hey @keith-moore-bluefruit, images_dir should be the path used to import images. Could you try using one of the following and see if that fixes your issue, thanks!

If you import using absolute URLs

images_dir: documentation/images

or if you import using a relative path something like below:

images_dir: ./images

If none of these work could you please invite me to the repository so I can review and offer a fix? Thank you.

BaileyJM02 avatar May 27 '21 15:05 BaileyJM02

Hi

Still no luck, I have given you access to see what I am doing wrong.

Thanks - Keith

From: Bailey Matthews @.> Sent: 27 May 2021 16:12 To: BaileyJM02/markdown-to-pdf @.> Cc: Keith Moore @.>; Mention @.> Subject: Re: [BaileyJM02/markdown-to-pdf] No images in the pdf file (#17)

Hey @keith-moore-bluefruithttps://github.com/keith-moore-bluefruit, images_dir should be the path used to import images. Could you try using one of the following and see if that fixes your issue, thanks!

If you import using absolute URLs

images_dir: documentation/images

or if you import using a relative path something like below:

images_dir: ./images

If none of these work could you please invite me to the repository so I can review and offer a fix? Thank you.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/BaileyJM02/markdown-to-pdf/issues/17#issuecomment-849716800, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAU5KAL4JGABO2BDK6AVNTTTPZONXANCNFSM45E55TWQ.

keith-moore-bluefruit avatar Jun 01 '21 13:06 keith-moore-bluefruit

Hi! I faced the same issue but unfortunately I cannot provide an access to the repo. Images are located in ./images/ directory. In my markdown files I refer to images with a relative path like images/**.png I tried:

  • images_dir: images
  • images_dir: /images/
  • images_dir: .
  • images_dir: ./images

Maybe it will help fix the issue.

unterumarmung avatar Jul 19 '21 20:07 unterumarmung

Hi, I initially had the same issue, but the following config fixed it for me :)

Readme.md is in the root of repo, and the file that I want to convert. Images are in a folder called "Screenshots"

In the Readme the images are embedded like this: ![Image of Main Screen](Screenshots/Main.png?raw=true "Main Screen")

Working config:

          input_dir: ./
          images_dir: "./Screenshots" 
          image_import: "Screenshots"

Dak0r avatar Mar 20 '22 19:03 Dak0r

What @Dak0r wrote is correct!

images_dir is the absolute path of the images folder (from the root of the directory). image_import is how you write the path to the image in the markdown file.

Both keys must be implemented for image embedding to work!

My example that worked:

Image in path tasks/md/images/test.jpg.

Markdown file in path tasks/md/test.md:

<img src="images/test.jpg" width="50%">

Github Action configuration:

...
input_path: 'tasks/md'
images_dir: 'tasks/md/images'
image_import: 'images'
...

kkizlaitis avatar Jan 05 '23 15:01 kkizlaitis

What @Dak0r wrote is correct!

images_dir is the absolute path of the images folder (from the root of the directory). image_import is how you write the path to the image in the markdown file.

Both keys must be implemented for image embedding to work!

My example that worked:

Image in path tasks/md/images/test.jpg.

Markdown file in path tasks/md/test.md:

<img src="images/test.jpg" width="50%">

Github Action configuration:

...
input_path: 'tasks/md'
images_dir: 'tasks/md/images'
image_import: 'images'
...

@kkizlaitis Does it have to be in (single/double) quotes for it to work properly? I did try without the quotes, like below:

# Code ....
  steps:
    # More Code...
      with:
        input_dir: Journals
        output_dir: pdf
        images_dir: Journals/images
        image_import: images

and the images have not been rendering.

And my images are rendered in HTML format, similar like yours

<div align="center">
  <img src="./images/<name>.png" width="60%" />
</div>

cr2007 avatar Oct 02 '23 18:10 cr2007

@Dak0r @kkizlaitis thanks a lot for pointing this out. @BaileyJM02 for me it was not clearly described to add both configs for images_dir and images_import to use images for PDFs.

@cr2007 if you still encouter issues, one issue I overlooked was that the image files are in the correct location of your Github Action VM when you run the action. I actually generate them first with Jinja and copy them to another location from where they get converted via the action.

Sp0ngy avatar Nov 29 '23 15:11 Sp0ngy

@Sp0ngy the details of my issue are in #53

If you could kindly have a look at it and see if there's a solution, that'll be perfect

cr2007 avatar Nov 29 '23 15:11 cr2007

@cr2007 if you still encouter issues, one issue I overlooked was that the image files are in the correct location of your Github Action VM when you run the action. I actually generate them first with Jinja and copy them to another location from where they get converted via the action.

Could you give me more details on how to use Jinja, it might be helpful in resolving this issue for now.

Currently, the only fix I had for now was using this VS Code extension that converts the Markdown file to PDF within the VS Code workspace.

cr2007 avatar Dec 01 '23 03:12 cr2007

@cr2007 Jinja just fills your markdown files, if you use something like this:

| ID | Name | Description |
|----|------|-------------|
{%- for uid, u in users.items() %}
| {{ u.id }} | {{ u.name }} | {{ u.description }} |
{%- endfor %}

The Jinja loads the parameters and creates a filled out markdown file. Read more here. Using Jinja will not solve your issue. You can give me access, I can have quick look on the action and the repo structure, but if the main dev of this action did not find anything, I am afraid I won't either.

Sp0ngy avatar Dec 01 '23 08:12 Sp0ngy