How to put an image from a SP library into a HTML table to a PDF

[JHL]

Hi everybody,

In the following I would like to lay out a problem which I cannot solve. Let me first explain its background.

I have a Power Apps, where people can register their credentials in textinput fields. Once they are finished they are then required to sign off their names in a peninput field. The peninput I save as a JPG-file in a SP library, the textinput fields I add to according columns of the created JPG-file. I also store the Base 64 code of the PenInput-JPG file as string in an according column, called Base64, related to the created JPG.

Now my next goal is to take the SP library content and save it to a HTML table, which I then want to pass on to a PDF.
While I succeed in getting the textinput-field contents into the HTML table, I fail with adding the the Peninput-JPG to the table.

I now have read every threat and watched every video I could find about similar problems, yet cannot find a solution that works for me. I know I must be close, but I think I have reached my troubleshooting limits.

Here is what I have come up with so far:
1. Within my PowerApp I create the dynamic content that is going to populate the HTML file. To achieve that I use a HTML text field.
2. I pass on the HTML content then to PowerAutomate by triggering the RUN-Function by hitting a Button within the PowerApps.
3. The Flow first creates a proper HTML-file, then converts it to PDF and finally creates a new file by storing the PDF in a SP library.

Everything works fine except the filling in the JPEG.
The error must lie somewhere within the HTML-code in the PowerApps.

Here is the code that I pass to the flow:

<td><img src="& Concatenate("""data&colon;image/png;base64,",Base64,"=",""""," alt=""Broken"" width=""100"" height=""100""")&"/> </td>

And this is the outcome:

    <td><img src="data&colon;image/png;base64,eyJDcmVhdGVmaWxlX0ZpbGVDb250ZW50IjoiaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQVhVQUFBQ0RDQVlBQUFCeVFZdDRBQUFTZGtsRVFWUjRYdTJkQit3MFJSbkdmL1FpMGdRUkd3Z0NTZ21XS0ZpQ0tCRlVGR09FcUxHQkloWlFVWVJvTktoUll3TUxpa2l4aG9nQlJSUjdoWUFnRWpGQlJiRUFGcEFxSGJHQTV0RVozZSsrSzN1N2U3Y3pzODhrWHlELzI1bDkzOTg3Kzl6YzdNdzdxK0JpQWlaZ0FpWlFESUZWaXZIRWpwaUFDWmlBQ1dCUmR5Y3dBUk13Z1lJSWxDenFkNCtKMCszQVBRdUtuMTB4QVJNd2dSVUlsQzdxNC94N0xIQysrNEVKbUlBSmxFaGdpS0plc3M4bDlsSDdaQUltTUFlQmtnVk8weS9SdjVMOW5DUGN2dFFFVEtCMEFpV0xuVVc5OU41ci8wekFCRllpWUZGM3B6QUJFekNCZ2dpVUxPcDNBYXVHV0pYc1owSGQwYTZZZ0FtMEpWQ3kyRm5VMi9ZTzF6Y0JFOGlPZ0VVOXU1RFpZQk13QVJPWVRNQ2k3dDVoQWlaZ0FnVVJLRm5VL3dtczVqbjFnbnFyWFRFQkU1aEp3S0krRTVFdk1BRVRNSUY4Q0pRczZ2OEFWdmRJUFovT2FFdE53QVRhRXloWjFQOE9yRkZCVkxLdjdYdUNXekFCRXlpQ1FPbENWOTFWcW9EOUMzZ0o4T2tpb21jblRNQUVUR0NFUU9taUxuZEhoVDBpa01ESHovOEdYQS84SFBnVThBWDNGQk13QVJQSWtjQVFSRjF4ZVRsd1hDWEJWNU5ZNlV0QVh4QTNCTkUvdUVranJtTUNKbUFDaXlRd0ZGR3ZNcndSMkhBQlVDWDZkd0svQlBZSGZyYUFlN2pKK1Foc0Iyd0ZiQUhjSDlnTTJCVFlDTmdBV0E5WUIxZ2JXQ3U4V05jeVdNVlJTMkxuS1RjQlY0eFVPQnQ0Mnp5TitGb1RhRXRnaUtKZWg5bmJnYjJBQjRXSGY4Mk9Sdm5YQW9jQXA5Y3h3dGZVSnFBdjZhT0JQWUROQWNVcmhYSW1zRThLaHRpRzRSQ3dxRGVQOWJIQXZzQzlRdUt3cGl3MUl2d1Q4QWJnaTgzTkdVek5Cd0R2QVhZTEkrL3FDcWRKRVBRcktrNmZpYmYrNlQyS1J1UjNBTGNCTndQNkZhZDNLNWMwb0hsNWFLTmE5UmZBZFEzYWNoVVRhRXlncVJBMXZ1RkFLajRFT0JuWVB2eTBiOEpad25NbGNBUnc2a0M0amJxNUkvQlc0SEZoMmlUdU81aUVRM3NUOU03alIwSDRMeGdvTjdzOVlBSk54R2JBdURweFhYTzRFaHZOOTg0N1RhQVJaYWtIWitzOXhLc0RsM1ZyVEhkSndLOEJ6Z1UwWGZhclRxTGpSa3dnY3dJVzlYUUN1Rk9ZZnRseVpOUFVKQXMxVmJCeE91YlBaY243Z1djRDl3dSt6dXFIMmtqMlorRDd3SnVDbU05MVExOXNBa01oTU90aEdncUhsUDNjRy9ob1dNRXhLVjRwQ3Z3cmdWY0VzQkp2dmN5TUNkYW04VlllZkswazBic0tGZmZSbEh1bmJVdU9nQitZNUVJeTB5Q05WcDlRT2RWcHRFSXFBajlwMDFlMFZ5OHVOUUxYZTRNemdNTXFqbWdGeTFVVzlabDl3UmVZd0VvRUxPcDVkNHJ6Z0YybUNQd0pZZU5WSDE1V0U2cnAvcmVIZVcrdEd0S3UzV25Gb3Q1SHhIelBJZ2hZMUlzSTQzK2N1QWpZZVl6QVMweTF5U2FuWWxIUEtWcTJOU2tDRnZXa3d0R1pNY3BoczhOSWExcFRuOHM2ZUl0NloxM0JEUTJOZ0VXOTdJaFhUMytTcDNvQnFTM3lxUmVMZXVvUnNuM0pFckNvSnh1YXpnejdMYkQxU0d1cHg5MmkzbG40M2REUUNLVCtjQTh0SG92eVY4bXEvanF5UEZCaXY4MmlidGl5WFl0Nk80QXhyYlJhOFRQZWptVjJ0UjN3N0VMV3ltQWxGRk9Xd2xpMDdMRE8ydkZXTjIxUTJhTGVBRnFvb2x3NFdpb2FpNS94NWl5enJPbUFaeG0yVmticmhlbHBsUlkrREJ6YXFzWHVLMXZVMnpGVlVqSnYzbXJITU52YUZ2VnNROWZhOE9ySlQ2bU4xaTNxN2NLcmpWdGlxT0pudkIzTDdHbzc0Tm1GckRPREx3VzJEYTNwK0w3OU9tdTVmVU1XOVhZTWRWaUhEZ2F4cUxmam1HVnRpM3FXWWV2TTZEaGExMzlYN2F6VjlnMVoxTnN4L0YwNDhjbWkzbzVqbHJVdDZsbUdyVE9qdndjOEtiU21vOWQyNzZ6bGRnMHB2ZkF0SG1rMmhtaFJiNHd1LzRvVzlmeGoyTmFEYXVLdFZQcURSYjFkVkMzcTdmaGxYVHVWaHpocmlKa2JmeUp3WVBEaDRwQS9wbStYTE9ydEltQlJiOGN2NjlvVzlhekQxNW54MVhRQ0tmUUppM3E3MEZyVTIvSEx1bllLRDNEV0FBc3gvbFdBVXVLcVhEWW1yY0N5M2JTb3R5TnVVVy9ITCt2YUZ2V3N3OWVwOFhjQ1NpZWcwbmUvc0tpM0M2MUZ2UjIvckd2My9mQm1EYTh3NHg4S1hCSjh1cnF5ZWFVUE55M3E3YWhiMU52eHk3cTJSVDNyOEhWdWZEeXRTUDlkcy9QVzZ6ZG9VYS9QYXR5VkZ2VjIvTEt1YlZIUE9ueWRHNjlNam1zRG1vcFpwL1BXNnpkb1VhL1B5cUxlamxWeHRTM3F4WVcwbFVNVzlWYjRrcW5za1hveW9WaStJUmIxNVROUCtZNFc5WlNqVTk4MmkzcDlWc1ZkYVZFdkxxU3RITEtvdDhLWFRPV2JnZldETlg3R2t3bkxjZ3h4d0pmRE9aZTdXTlJ6aWRSME8rTm1zcnVBMWN0d3lWN1VKV0JScjB0cUdOZFoxTXVJYzh5K2VRT3dTUmt1Mll1NkJDenFkVWtONHpxTGVobHhqcUwrSFdEUE1seXlGM1VKV05UcmtockdkUmIxL09Pcy9RVi9DMjQ4RXJnb2Y1ZnN3VHdFTE9yejBDci9Xb3Q2L2pIK0hQQTh2eVROUDVCTlBiQ29OeVZYWnIwaGl2cVd3SG5BZlNia3ZNbnRHZkg1cEdVK203Vzl5cTNEMW5iTUZ6WWlVTHFvUzdoUEJYWUYxcWhKS0xkbjVPL0JOeDEra3RxQjRqV1IrN0kyQkhMcnNHMThkZDNaQkVvVzlTaDJzeW1zZUVWdXowaDhTWG9ib0hRTExnTWprRnVISFZoNGx1NXVxYUplUFFRa1FwWDQzUTRjQnh3eFFucmQ4Sm4rbk5zekVrWDlwOEFqbHQ2RGZNUGVDZVRXWVhzSFZyZ0JKWXE2TnVDc0d1SldkMG9pQ21QT292NEs0UGpDKzZ2ZEcwUEFvdTV1VVNWUW1xaFh4Vm1qOVRyejZOWERRbTZ0YkxmUG9hZThFM2h6TU5UUGRnNFJXNENORHZ3Q29HYmNaQ3Fpdmhmd3paYmlWQlYwK2FVcGxXbmxhOERUS2hlb2Zoemg1eExTWHdQYnRPU1dpNisyY3dJQmk3cTdSb29qOVNPQnR6Y1VwK2NDcDFTY3VoN1lkRXFZRHdJK1BqSjNucU9neThVN1FoNzhYTzMzMDlnQkFZdDZCeEFMYWlLVmtmcm5nZWNBczhSSksxcVVzQ3FPcUU4QVhsYUp4NjhBSGRNM1drNENKUDRhdlZlZkFkMXZYK0QwVEdPcWR3YnlSenRLZGRpSnl3QUpXTlFIR1BRcExxY2k2dWVIdGVUVHNneHVBTnpVWWZpdUJUWnIyTjdvNnBwWlgwWU5iek96V3B4eXVoellhdWJWdnFCSUFoYjFJc1BhMktsVVJQMjN3TmFBUnVKclRmR21PbS9lMU9rdUJEaU9rS3MyUEJqUVlSWExLazhIemd3M1UvNFhuVFByTWtBQ0Z2VUJCajJEa2ZwMUlXVnNuZFVuZndBZU1DT01VZnovQWh3QWZBUFE2THFyTXZybDBzVVh4YnkyWFFQY3U4YVUxYnp0K3ZyTUNGalVNd3ZZZ3MxTlphU3VUVUdhNzVaUWFXdi9wS0k1OCswcUgvYlZuMU9ZOW9pL0ZyUUNwc3Brd1YzR3phZEdvSytISURVT3R1ZS9CRklSOWJpbGY5S0x6aGl2RkRZSmZSaDRUVENvcitmcE1TRXBtY3pRU2grdCtIRVpLSUcrT3VGQWNTZnZkaXFpSG5lQm5nVThjUUsxNmlhaEp3UGY3WWx1MVk2K25xZkxnQWQ1NnFXbkhwRFliZnZxaElsaHNEbUJRQ3FpSHFjU1BnbThkRXgwM2djY0h2N2U5L0s5T0ZVa2MvcDZuanoxNGtmNGZ3VDY2b1FPUVpvRVVoSDFPSzN5T3VCRFkxQlZWNXYwM1lmN0ZuV3RzdmxOWUtTNWRNMnB1d3lZUU44UHhJRFJKK2w2YXFMK2FPRENFVkovQXU0WC9uWXhzSFBQSlBzVzlaZ2FvRTZ5TWgxQ3ZTT2dhUzJYUWdsWTFBc05iQU8zdEI1Yzg4TXErdTg2RGRyb29vcVc1V25WaThwby85d1l1Q0Y4MXNleXdYSCs5UzNxOGYyRDFzUnIxRjR0ZWgveEF1RGhZVFZSWEJXakZBeHY2eUpZYmlNOUFoYjE5R0xTbDBYYW5hbGRtaW8vQm5icHlSQ2RyNmx6TnNlSmVseUxyYzkyQTg3cHljYnFiZnNVOWVvWG9PSjEzNUQrUUt0aDlHdG0zTWxIT3JydjNjQlhFMkJuRXhaQXdLSytBS2daTnFuTk9FOEpkczlLZ0xWbzk0NENEcHNnNm5GNktKVlJ1c3pVQnFuMUp0amJodFZPSWVPaXR2dHJjOVhtWVVPV2ZxM29SS043aE9XTE1lK05tSXcrei9xYmZ0bjhISGdIY0ZISHFSWGErT2U2Q3lKZ1VWOFEySXlhM1FKUXJoRDFoVHJ6c290MjdTdkFNeVlzejR0VERiUFNCeXpheG1yN04xZHlybmYxUE4wSWJOakFDZkc1RXJnZ2pNUlBEakZ0MEpTcjVFcWdxMDZZcS8rMkczU1dwVVo5S3RwSWMyalBVRFNhMUJ6d3VHUmVjVldNVWdQb3l5aUYwcldvcncrb3pXcVIzK0toMUFiSzZhSjNIcHIyMlRKY3BEWDZSMWR5MEtmQXhUYjBSTUNpM2hQNFJHNTdkcGlibGpsL0JCNllnRjIvRDNhTVczOGVSZjFqd01FTHNuVjNRUCswUXFUT0twR3VSVDFPTWNtOWFjK256aUI5bURjY0xhZ1haTnlzUlQzajRMVTBYY3NGOVROZHBlNVJieTF2V2F1NmttNXRGRWFybzFNUVVkUVgyVysxS3VTdDRaQ09PaXRFRmlYcXN6WlZhY1N1WFBKYTRqa3JvVmt0OEw2b0RBS0xmRGpLSUZTdUYvR1VISG40V3VDWVJGeU5kbzBUcXhSRlhTOGk5Zkp5MXNpNkxsNjlVNGhwRC9SdVlWS0pMTFJhU0llS3VKaEFaNTNRS1BNam9CRzZSdW9xdndnYlVsTHhJbzVBeDIwc2lrSzJ5RjhXODQ3VXRWcm9YaDJLZXAwNGZBRFFidHVVVmdIVnNkdlhMSUdBUitwTGdKellMZmF1ckZHZTlSTy9EOU5qQ2dBZFBQM1VFUVBpeXBqNFo2MzAwTnp5VDhJZjZzNkRUL01yQjFHL0tpeHgxTlJQazFVeWZjVFY5MXdTQVl2NmtrQW5kSnRxVnNHOWdHOG5aSnRNaWNzV1B3RWNPTVkycmJkV01xOXhKeUoxc1ZQeVU4RCt3S2ZEZ1JxejhQUXhVbytNdmc3b1M5ckZCUDVId0tJK3JNNmdLUTF0YWxINUlmRDRCTjJQMHkvSEFvZE1zZThoWWF1N3poWFZLaDZWTGticVA2aXNmcG1VOXJkcTFySkZYZkZUSEZYMGdsVHZIbHhNd0tJK3dEN3c0akQ2bE90YW02NWRpU21XdXFLK0tOdm5GWFVkV0syREtWU1dNVWlLeTFDbkhjcTlLRFp1TndNQ3kraUVHV0FZaElueE5DRzlYTk9CQ2xvUG5tTHBXOVMxdTFhYmVyUzFQdjZxbWNZcHptOHZTOVJqcmhuZE4yYXJUREdPdHFrbkFoYjFuc0F2K2JhWEF0dUdlNTRCUEd2Sjk1L25kbjJMK3VtQmo3NzhOTC8rYWtETExNZVZPUDhlUDF2Rzg3U01EVmp6eE12WEprWmdHWjB3TVpjSFo4N3J3eFp5T2E2TlBYSDVYYW9nK2haMWNhbWVmVnFYMHpLbVEwNnFuQVRsK2ZTNmtSbllkUmIxOGdNZVJUS0ZaRjExYUtjZzZsOEw2Uk9VRTZmT00vSmU0STExbkd0NXpTM2hYWWptOGZXQzJNVUVWaUpRcDhNYVc3NEU0dnl3UEZoa3ZwUXVDYVVnNmxWL2xQcjJNK0VQYTQ4c3BaVG9iOTJsODFQYWVobHdRdmhjYVpLL3RhVDcramFaRWJDb1p4YXdPY3pWSVFoeERYTk8rVUZTRS9VNWtDLzBVbTIwMGlFWU9VeWhMUlNFRzU5T3dLSmVaZytwQ3JwRWNzMk0zTFNvcnh3c3JYS0o2OUZUU0krY1VYY2FucWtXOWZKaVhoVjBwWEZkTnpNWExlb3JCeXptNnNudEN6cXpybGVHdVJiMU11SVl2Y2hkME9XSFJYM2xQaGxUTytoTVZwM042bUlDRXdsWTFNdnBIQ1VJdWtWOTVmNTRQSEFRb00xak9oVkpTZGhjVE1DaVhuZ2ZLRVhRTGVvcmRsU2RiS1FzbENxSzhiVDg2b1YzY2J0WGw0Qkg2blZKcFh0ZFNZSXV5dkU0dDdjQTcwb1grMUlzVTA0WlphdlV1YTExVG1GYWlsRytTZG9FTE9wcHgyZVdkYVVKdXZ5OU1lUUkxeUVRSDVvRndKK2JnQW1zU01DaW5tK1BLRkhRTGVyNTlrZGJuZ2dCaTNvaWdaalRqRklGM2FJK1owZnc1U1l3U3NDaW5sK2ZLRm5RTGVyNTlVZGJuQmdCaTNwaUFabGhUdW1DYmxIUHF6L2EyZ1FKV05RVERNb0VrNFlnNkJiMWZQcWpMVTJVZ0VVOTBjQ01tRFVVUVpmYk1YR1ZEbitPMlJIemlKS3ROSUVFQ0ZqVUV3akNGQk4yQno0SWFCT0tTbzY1WE9ZbHJCVEJ6d1FlQjF3eGIyVmZid0pESjJCUlQ3TUhLTVhxWndHZFpyOXFNUEVtWUtNMHpiVlZKbUFDcVJDd3FLY1NpZi9iY1RLd2IrVXdocXVCb3lwSDBxVm5zUzB5QVJOSWhvQkZQWmxROEw2UXVHbURZTkt0d0NlQlE5TXgwWmFZZ0Fta1RzQ2kzbitFRGdiZUJPZ2dCQldsbnYweXNGLy9wdGtDRXpDQjNBaFkxUHVMbUk2YTA0SEZPd1FUZElMOXVlRzArTi8wWjVidmJBSW1rRE1CaS9yeW83Y3RjQkx3K01wSjlaY0FSd0E2eGQ3RkJFekFCQm9Uc0tnM1JqZDN4VFdBVTRCOUFQMi9pdFprYTdUK2tibGJjd1VUTUFFVEdFUEFvcjZjYm5FTWNBQ3dYcmpkemNDSndPSEx1YjN2WWdJbU1CUUNGdlhGUmxxaWZSaXdXYmlOamlRN0hYamVZbS9yMWszQUJJWkt3S0srbU1ocjVjbzdBYzJmcStnbDZGbGh0UDc3eGR6U3JacUFDWmdBV05TNzdRVVBCNDREZHFrMGUzRVlyWCszMjF1NU5STXdBUk5ZbVlCRnZadGVvUTFEMmduNlZHQzEwT1Fmd3htYk9nM2V4UVJNd0FTV1FzQ2kzZzd6UFVMQ3JlY0Q2NGFtZE1hbWhGd2JpbHhNd0FSTVlLa0VMT3JOY084YThyTWNDTVJ0L1hjQ3B3RXZhdGFrYTVtQUNaaEFld0lXOWZvTWxTRlJpYmIwYjg5S05ZbjVPY0FMZ1d2cU4rY3JUY0FFVEtCN0FoYjEyVXgzcTRqNTV1SHl1OFBTUkMxUC9CSWdZWGN4QVJNd2dkNEpXTlRIaCtEZVFjaTFORkVIVmNSeVlSQnpDZm1sdlVmUEJwaUFDWmpBQ0FHTCtvcEE5cWlNeWpjSkgxMWJFZkp2dXdlWmdBbVlRTW9FTE9wdy80cVE2d2kxV0w0UnBsWTB4WEpEeWtHMGJTWmdBaVlRQ1F4WjFMV21QTDc0WEQ4QVViWkVUYTFJeUM5eU56RUJFekNCM0FnTVVkU2ZEaHdKUENvRTYvYUtrRXZRWFV6QUJFd2dXd0pERkhVdFIveFdXSWFvRWJuKy9TSGJDTnB3RXpBQkU2Z1FHS0tveS8zdEFVMjF1SmlBQ1poQVVRU0dLdXBGQmRIT21JQUptRUFrOEcrZ2lOYWlHVllkUlFBQUFBQkpSVTVFcmtKZ2dnPT0iLCJVcGRhdGVmaWxlcHJvcGVydGllc19UaXRsZSI6IiIsIlVwZGF0ZWZpbGVwcm9wZXJ0aWVzX0dlc2FtdG5hbWUiOiIiLCJVcGRhdGVmaWxlcHJvcGVydGllc19UZXN0Y29sdW1uIjoiQSBUZXN0IDEiLCJVcGRhdGVmaWxlcHJvcGVydGllc19FbWFpbCI6IkJhc2U2NCBUZXN0QGl0cy5qbmouY29tIiwiVXBkYXRlZmlsZXByb3BlcnRpZXNfVGVsIyI6IiIsIlVwZGF0ZWZpbGVwcm9wZXJ0aWVzX1VzZXJUaW1lIjoiMDA6MDA6MjYiLCJVcGRhdGVmaWxlcHJvcGVydGllc19WZXJpZmllZCI6IlllcyIsIlVwZGF0ZWZpbGVwcm9wZXJ0aWVzX1N0cmVldCI6IiIsIlVwZGF0ZWZpbGVwcm9wZXJ0aWVzX1N0cmVldCMiOiIiLCJVcGRhdGVmaWxlcHJvcGVydGllc19aaXBDb2RlIjoiIiwiVXBkYXRlZmlsZXByb3BlcnRpZXNfQ2lyeSI6IiIsIlVwZGF0ZWZpbGVwcm9wZXJ0aWVzX1ZlcmlmaWVkQWNjdXJheSI6InRydWUiLCJVcGRhdGVmaWxlcHJvcGVydGllc19WZXJmaWVkVEMiOiJ0cnVlIn0==" alt="Broken" width="100" height="100"/> </td>

I have noticed that a couple of people have faced the same issue. So if you can provide a solution a lot of people will benefit. 

Thank you so much for your help and best regards

JHL

[JHL]

Bump

[JHL]

I have a tried the very good solution by Yash Agarwal

that he has shared here:
https://www.appliedis.com/newly-released-json-function-for-powerapps/
Yet still no luck. Please if anybody knows how to solve this it would be tremendous.

[JHL]

Another Bump

[JHL]

Still bumping. Even if you know it doesnt work, a response is highly appreciated by me.

Thank you!

[JHL]

Hi folks,

bumping once more.

Is there anybody out there being able to help me out on this one?

Thank you and best regards

JHL

[ttruong]

You could use the RichTextEditor to put images into HTML, cause RichTextEditor allows to copy and paste the image in the body

Then use the email option to generate pdf.

[Anonymous]

https://www.youtube.com/watch?v=bIne3DD3HAg&ab_channel=ShaneYoung 

the link I used to make it work.