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

[frags51]

@harshdamaniahd We do not support SVG images on the card in Teams mobile as of now. They are supported in card icons, though. Let me get back on base64 - if possible could you share the exact base64 image url?

[frags51]

@harshdamaniahd I just checked with a base 64 PNG in the Image, and it worked fine. Could it be an issue with the conversion logic? Here's the image I used -

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Summarising the expected image support as of today on Teams mobile -

Image type	Card Icon	Card Image	Quick View
PNG, JPG (base64 or URL)	✅	✅	✅
SVG (base64 or URL)	✅	❌	✅

I'll get back if there's a plan to enable SVG support on mobile for Card images. Thanks for reporting, let me know if the PNG works for you :D

[Annie-Johnson]

@frags51 to confirm you are saying that base64 PNG images are supported in Viva Connections Card Images, correct?

[frags51]

@Annie-Johnson yes, that is correct.