0
votes

I'm attempting to use adaptive cards in Outlook (actionable messages), and I'm trying to understand how the image rendering works.

Here is a simple card I'm using to test.

{
    "type": "AdaptiveCard",
    "originator":"--------",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "test image card"
                }
            ]
        },
        {
            "type": "Image",
            "id": "image",
            "url": "https://res.cloudinary.com/adaptivecardtest/image/upload/testimage.jpg"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

If I change the image located at that URL, the new image does not show on the adaptive cards. I would have simply accepted this behavior (maybe the image is pulled when the email is received, and thus it doesn't update), but if I send new emails they still show the old image, despite the fact going to that URL in a browser shows the new image. If I use a refresh card so that a new card is loaded from the HTTP request, the old image stays. It seems to update after an arbitrary amount of time (anywhere from an 1 hour to 3 or 4), and when it updates it updates in both OWA and the desktop client.

I deleted all cache and cookies for my browser, as well as attempting to use multiple browsers, but the image was not updated.

It appears that Microsoft exchange is caching the image. So when and how is the image URL accessed, and how is the image cached? Is there a way to force Outlook to refresh the cache?

2

2 Answers

0
votes

I see you are returning cache-control header from your URL. This may cause any CDN/Proxy server cache the images. If you foresee your images being changed frequently then try setting a small cache time for your images.

For example, to test this theory, you can remove the cache control headers and check if the change in image gets reflected immediately.

HTTP/1.1 200 OK

Access-Control-Allow-Headers: X-Requested-With

Access-Control-Allow-Origin: *

Cache-Control: public, max-age=2592000

Content-Type: image/jpeg

Edge-Cache-Tag: 597828901897160436820627510901590644213,b6c4305593164dcaff27257c69cb92e2

Etag: "6b75954c15f7fed43b8dbeeaf091caff"

Last-Modified: Fri, 16 Nov 2018 16:43:44 GMT

Server: cloudinary

Timing-Allow-Origin: *

Content-Length: 16980

Accept-Ranges: bytes

Date: Mon, 19 Nov 2018 22:13:34 GMT

Via: 1.1 varnish

Age: 276099

Connection: keep-alive

X-Served-By: cache-sea1024-SEA

X-Cache: HIT

X-Cache-Hits: 1

X-Timer: S1542665615.533512,VS0,VE1

0
votes

Actionable Messages feature has its own image proxy which caches all images referred in Adaptive Cards. The client will only render the updated image when the cache in the proxy expires.

A generic best practice to break caches is to generate new URLs on image update. Some examples are:

https://example.com/images/<version>/logo.jpg
https://example.com/images/logo-<version>.jpg
https://example.com/images/logo.jpg?v=<version>