How to add an image that is local to the pdf generator file, cordova-plugin-pdf?

[jggj21]

Good morning I find myself trying to upload an image to the pdf that is generated with this library, but I don't know where in my project I should have the image and how the code should be to import it. Can someone please support me

Structure of my project:

nothing in the documentation: documentation: https://www.npmjs.com/package/cordova-pdf-generator

[cesarvr]

Hi I wrote this example project, where you can find how to load assets from internal memory.

Hope it helps.

[jggj21]

I can't understand the complexity :(, I just want to know in which folder I should save the image and then how to show it in the pdf.

[jfoclpf]

@jggj21 you just need to put the image files in any folder accessible by the app (check the object cordova.file by console.log(cordova.file) to see what you have access to. You also need plugin cordova-plugin-file) and then use a normal img html tag

const pdfhtml = '<img src="path/to/image.jpg">'
pdf.fromData(pdfhtml, options).then(......

[ballhausenkarl]

@jggj21 I have done an implementation using embedded image as it is not required to target a path, think is a faster option for development using crossing platforms for static images in a PDF file, like logos or something offline. Simply convert your image to base 64 plain text and add it as follow to your img tag.

<img src="data:image/png;base64, REPLACEFORYOURBASE64TEXT" alt="ballhausen.png" style="height: 40px;">

Link to do the image conversion, https://base64.guru/converter/encode/image

Hope this helps, Gerar Ballhausen. Ballhausen Ingeniería México.

[Serializ3r]

@jggj21 I have done an implementation using embedded image as it is not required to target a path, think is a faster option for development using crossing platforms for static images in a PDF file, like logos or something offline. Simply convert your image to base 64 plain text and add it as follow to your img tag.

<img src="data:image/png;base64, REPLACEFORYOURBASE64TEXT" alt="ballhausen.png" style="height: 40px;">

Link to do the image conversion, https://base64.guru/converter/encode/image

Hope this helps, Gerar Ballhausen. Ballhausen Ingeniería México.

thank you mister, you're a life saver, your solution worked great for me!

[pchitrakar-tt]

Images do not show from api 30. I have tried using base64 images but still does not work.