Issue display images using DrawImage when passing in a base64 string

[CostaEG]

Hello,

I have been trying to display a png image coming from my backend but I keep getting an error saying: Uncaught (in promise) The input is not a PNG file!

I know the base64 string should work because in my frontend I'm also displaying it in an img tag and its working as intended. Also my code for the pdf was working just fine when I was using a local png asset from one of my folders. I've tried converting this to uint8Array and that doesn't work either.

My code:

  for (let key in growth) {
    const label = convertCamelCaseToSentence(key);

    if (key === 'startingSpec' || key === 'finishSpecPic') {
      const dataURI = `data:image/png;base64,${growth[key]}`;

      console.log('My Local Asset: ', costaFarmsLogo);
      console.log('Image I want to render from backend: ', dataURI);

      const image = await pdfDoc.embedPng(dataURI);
      console.log('image', image);

      page[currPage].drawText(label, {
        x: 25,
        y: growthY,
        size: labelSize,
        font: font,
      });

      page[currPage].drawImage(image, {
        x: 25,
        y: growthY - 120,
        width: widthMargin - 25,
        height: 100,
      });

      growthY = growthY - 145;
    } 

Below is an image with my console.logs. The logo I'm rendering works fine when I pass it into drawImage and also as far as the string goes looks the same as the one from the backend. I'm not sure why it won't work.

[CostaEG]

Found a solution myself. Turns out the backend data that was coming to me was in JPG format, I had to check the base64 string to verify whether it is JPG or PNG and run the proper embed function based on that. Hope this helps someone one day.