Is there a way to debug how a Vcard is being read?

Question

so I have this website that gathers data and uploads it to a vcard, for that I'm using the vcf lib.

I'm being able to add everything to it except for the photo. It comes from an S3 bucket, the permissions are all set correctly, I'm logging the image and when I click it in the log it downloads it, it's size is aprox 500Kb so nothing major there and it's a jpg.

This is my function that is trigger by a button click

const saveToContacts = async () => {
      try {
        const card = new vcf();
        const imageBuffer = await loadImageFromIndexedDB();
    
        if (!imageBuffer) {
          console.error('Image not found in IndexedDB.');
          return;
        }
    
        // Set basic properties

        // Manually encode special characters in the names
        const removeDiacritics = (str) => unorm.nfkd(str).replace(/[\u0300-\u036f]/g, '');
        const decodedUsername = removeDiacritics(decodeURIComponent(username));

        // Set structured name with properly encoded values
        card.add('n', [decodedUsername]);

        // Set formatted name with the full, properly encoded name
        card.add('fn', [decodedUsername]);

        card.add('org', company);
        card.add('tel', phone);
        card.add('email', email);
    
        // Set additional properties
        card.add('title', title);
        card.add('url', url);
    
        // Set social media properties
        if(facebook ){
          card.add('x-socialprofile', facebook, { type: 'Facebook' });
        }
        if(instagram){
          card.add('x-socialprofile', instagram, { type: 'Instagram' });
        }
        if(linkedin) {
          card.add('x-socialprofile', linkedin, { type: 'Linkedin' });
        }
        
    
        // Extract the S3 key from the profile_image_url
        const urlObject = new URL(profile_image_url);
        const imageKey = decodeURIComponent(urlObject.pathname.replace(/^\//, ''));
    
        // Generate a pre-signed URL for the image
        const imageURL = await generatePresignedURL(imageKey);
        const encodedURL = encodeURIComponent(imageURL);
        card.add('photo', encodedURL, { mediaType: 'image/jpeg' });
    
    
        // Generate vCard data as a string
        const vCardData = card.toString();
        console.log(vCardData);
    
        // Create a Blob from the vCard data with explicit UTF-8 encoding
        const vcard_blob = new Blob([new TextEncoder().encode(vCardData)], {
          type: 'text/vcard;charset=utf-8',
        });
    
        // Open a new URL to prompt the user to add the contact
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(vcard_blob);
        downloadLink.download = 'contact.vcf';
    
        // Trigger a click event to simulate a download prompt
        downloadLink.click();
    
        // Release the object URLs
        URL.revokeObjectURL(downloadLink.href);
      } catch (error) {
        console.error('Error saving to contacts:', error);
      }
    };

I've tried changing libraries and even manually creating the file and saving it as .vcf, but that didn't work

This is the vcard data log
BEGIN:VCARD
VERSION:4.0
N:Tomas 
FN:Tomas
ORG:GIFERMO
TEL:+myphonenumber
EMAIL:[email protected]
TITLE:
URL:
PHOTO;MEDIA-TYPE=image/jpeg:https://for security reasons I'm deleting this, but the link is working.
END:VCARD

Here's what I've tried

1. Image Properties:

   Confirmed that the image format is JPEG. Verified that the image size is 500KB.

2. Image URL:

   Checked the validity of the image URL. Direct Image URL:

3. Tried using the direct URL of the image without pre-signing. javascript

Copy code

Content-Type Header:

Ensured that the Content-Type header of the image served from S3 is set to image/jpeg. Testing on Different Apps/Devices:

Tested the vCard with the image on different contact apps or devices to identify if the issue is specific to a particular app or device. Error Checking:

Checked for error messages or warnings in the logs or console output when attempting to load the vCard with the image. Pre-signed URL:

Verified the generation and usage of the pre-signed URL for the image. javascript Copy code const imageURL = await generatePresignedURL(imageKey); card.add('photo', imageURL, { mediaType: 'image/jpeg' }); Image Loading in Browser:

Checked if the image loads correctly when accessed directly in a web browser. Image Size and Compression:

Considered the possibility of reducing the image size or compression to test if the contact app can handle smaller images. Contact App Documentation:

Checked the documentation or support resources for the specific contact app on your phone to see if there are any known limitations or requirements for images in vCards. Alternate Image:

Tried using a different image to see if the issue persists.