Teams Adaptive card showing placeholders instead of images

Question

Adaptive cards can include images that are referenced by public URLs. That is fine.

If public URLs to images are not accessible at the moment when the card is first presented on the New Teams app (Windows), the app replaces images with dummy placeholder images. That is also fine.

The problem is when these images become accessible, placeholders are not replaced with actual images on card refresh, and, what is worse, all new cards that reference the same images and URLs also show placeholders instead of actual images.

Maybe there is a way to clear the Teams cache to remove these placeholders, but I couldn't find it.

For Teams app on different computer with the same account, or for other users who use the same bot that sends adaptive cards, the result is normal:

It seems that once these placeholders are shown, they replace actual images forever. Is there a simple way to get rid of them, like clearing the cache, or something else?

Thank you,

Boris

Answer 1

@Boris Rusinovic

For more details about how to clear Teams client cache file, you could refer to:

https://learn.microsoft.com/en-us/microsoftteams/troubleshoot/teams-administration/clear-teams-cache#new-teams

Answer 2

I also face the same issues, the problem you're describing with Microsoft Teams adaptive cards showing placeholders instead of images can indeed be frustrating. Adaptive cards are a powerful feature that allows for the creation of rich, interactive content within Teams, and images often play a crucial role in conveying information effectively.

The issue seems to stem from the Teams app caching behavior. When an image URL is not accessible at the time the adaptive card is first loaded, Teams may cache the failure and continue to show a placeholder even after the image becomes available. This can happen due to network issues, permissions problems, or the image server being temporarily down.

Here are some potential solutions and workarounds to consider:

1. Check Image Accessibility: Ensure that the image URLs are publicly accessible without any authentication. If the URLs are correct and the server is up, try accessing the images from a browser to ensure there are no issues with the image hosting.
2. Cache Expiration: Some services have a cache expiration policy. If Teams caches the failed attempt to load the image, it might take some time before the cache expires and the image is attempted to be loaded again. Unfortunately, the cache expiration time is not typically under the user's control.
3. Modify the Image URL: If feasible, you can try to append a query string to the end of the image URL (e.g., ?v=2). This will make the URL unique to Teams and might bypass the cache. This is a common trick to force browsers to reload an image and might work with Teams as well.
4. Clear Teams Cache Manually: To clear the cache manually on a Windows machine, you can close Teams, then navigate to %appdata%\Microsoft\Teams in the File Explorer and delete the contents of the Cache, Blob_storage, Databases, GPUCache, IndexedDB, Local Storage, and tmp folders. After clearing the cache, restart Teams to see if the issue is resolved.
5. Use a Different Image Service: If the problem persists, consider using a different image hosting service. There may be compatibility issues between the current service and Teams.
6. Feedback to Microsoft: Report the issue to Microsoft through the Teams feedback tool. This can be done by clicking on the "Help" icon on the lower-left corner of Teams, then selecting "Give feedback". Microsoft is continually improving Teams, and user feedback is crucial for identifying and resolving such issues.
7. Check for Updates: Ensure that your Teams application is up-to-date. Sometimes bugs are fixed in newer releases, and keeping the app updated can solve unexpected behavior.
8. Developer Troubleshooting: If you have access to the development side of the adaptive cards, you can add some troubleshooting steps such as implementing a retry logic for image loading or using different image URLs for each card to avoid caching issues.

Remember, the specifics of cache behavior and image loading mechanisms could change with updates to the Teams platform, so it's important to keep an eye on the official documentation and community forums for any changes or updates that could affect how adaptive cards work. You can also checkout these two pages faced same issue with Healthcare Software Development Services and UI/UX Design Services now both are in good stages.