ace card viva connections - base64 image and svg image not working on card view on teams mobile app

[harshdamaniahd]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [X] mobile (iOS/iPadOS)
• [X] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

Hey I created an svg img dynamicaly and it does work on card view on mobile client. it works on web.

` public get data(): IImageCardParameters {

return { iconProperty:this.properties.imageUrl, primaryText: this.properties.description, imageUrl: this.getSVG(), title: this.properties.title }; } public getSVG(): string { let images=this.state.images;

return svgToTinyDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
<!-- Top-left image -->
<image href="${images[0]}" x="0" y="0" width="150" height="150"/>
<!-- Top-right image -->
<image href="${images[1]}" x="150" y="0" width="150" height="150"/>
<!-- Bottom-left image -->
<image href="${images[2]}" x="0" y="150" width="150" height="150"/>
<!-- Bottom-right image -->
<image href="${images[3]}" x="150" y="150" width="150" height="150"/>

` );

also later i converted svg to base64v png and it still does not work in teams mobile app.

private async convertSvgToPngBase64(svgData: string): Promise { // Conversion logic (as previously discussed) // Create an Image object const image = new Image(); // Set the src to the SVG data image.src = data:image/svg+xml;base64,${btoa(svgData)};

// Wait for the image to load using a promise
await new Promise((resolve, reject) => {
  image.onload = resolve;
  image.onerror = reject;
});

// Create a canvas element
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');

if (context) {
  // Draw the image onto the canvas
  context.drawImage(image, 0, 0);
  
  // Convert the canvas to a PNG in base64 format
  return canvas.toDataURL('image/png');
} else {
  throw new Error('Could not get canvas context.');
}

}

Describe the bug / error

svg and base64 image not loading

Steps to reproduce

run in spfx 18.2

Expected behavior

svg or base64 should work