[Rendering][iOS] Not able to render images in adaptive cards on iOS

Target Platforms

iOS

SDK Version

2.7.0, 2.8.1

Application Name

A Chat App

Problem Description

Context

We’re tying the AC Framework to display adaptive cards in a chat window to capture data from users. We tried with AdaptiveCards SDK versions 2.7.0 and 2.8.1

Issue, we can’t render images

Trying the framework we detected that the images we have on our adaptive cards weren’t rendered. All the components were rendered properly just the images are the ones that are not displayed.

We tried the example you created in the Readme file and were able to verify the same issue, the image you added in the example wasn’t displayed.

The expected behavior is to be able to render images in the adaptive cards.

Additional platform information

MacOS Monterey Version 12.0.1 Processor Quad-Core Intel Core i7 Xcode 13.2.1, Command line tools 13.2.1 Swift 5.5.2 Tested in Simulator and Device (Screenshots are of our actual device)

Screenshots

As you can see the adaptive card renders but the only element that was not displayed is the image.

The actions of the buttons worked as expected.

Card JSON

"{ \"type\": \"AdaptiveCard\", \"version\": \"1.0\", \"body\": [ { \"type\": \"Image\", \"url\": \"http://adaptivecards.io/content/adaptive-card-50.png\", \"horizontalAlignment\":\"center\" }, { \"type\": \"TextBlock\", \"horizontalAlignment\":\"center\", \"text\": \"Hello **Adaptive Cards!**\" } ], \"actions\": [ { \"type\": \"Action.OpenUrl\", \"title\": \"Learn more\", \"url\": \"http://adaptivecards.io\" }, { \"type\": \"Action.OpenUrl\", \"title\": \"GitHub\", \"url\": \"http://github.com/Microsoft/AdaptiveCards\" } ] }"

Sample Code Language

Swift

Sample Code

We created an iOS App project from start and added the code you added in the Readme file.

import UIKit
import SafariServices

class ViewController: UIViewController, ACRActionDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let jsonStr = "{ \"type\": \"AdaptiveCard\", \"version\": \"1.0\", \"body\": [ { \"type\": \"Image\", \"url\": \"http://adaptivecards.io/content/adaptive-card-50.png\", \"horizontalAlignment\":\"center\" }, { \"type\": \"TextBlock\", \"horizontalAlignment\":\"center\", \"text\": \"Hello **Adaptive Cards!**\" } ], \"actions\": [ { \"type\": \"Action.OpenUrl\", \"title\": \"Learn more\", \"url\": \"http://adaptivecards.io\" }, { \"type\": \"Action.OpenUrl\", \"title\": \"GitHub\", \"url\": \"http://github.com/Microsoft/AdaptiveCards\" } ] }";

        let cardParseResult = ACOAdaptiveCard.fromJson(jsonStr);
        if ((cardParseResult?.isValid)!) {
            let renderResult = ACRRenderer.render(cardParseResult!.card, config: nil, widthConstraint: 335);
            
            if (renderResult?.succeeded ?? false) {
                let ad = renderResult?.view;
                ad!.acrActionDelegate = (self as ACRActionDelegate);
                self.view.autoresizingMask = [.flexibleHeight];
                self.view.addSubview(ad!);
                ad!.translatesAutoresizingMaskIntoConstraints = false;
                
                NSLayoutConstraint(item: ad!, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0).isActive = true;
                NSLayoutConstraint(item: ad!, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1.0, constant: 3).isActive = true;
            }
        }
    }

    func didFetchUserResponses(_ card: ACOAdaptiveCard, action: ACOBaseActionElement) {
        if(action.type == ACRActionType.openUrl) {
            let url = URL.init(string:action.url());
            let svc = SFSafariViewController.init(url: url!);
            self.present(svc, animated: true, completion: nil);
        }
    }
}

Bridging Header

#ifndef AdaptiveCardsBridgingHeader_h
#define AdaptiveCardsBridgingHeader_h

#import "AdaptiveCards/AdaptiveCards.h"

#endif /* AdaptiveCardsBridgingHeader_h */

We added both recommendations you explained to enable image download

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSExceptionDomains</key>
		<dict>
			<key>adaptivecards.io</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
		</dict>
	</dict>
	<key>UIApplicationSceneManifest</key>
	<dict>
		<key>UIApplicationSupportsMultipleScenes</key>
		<false/>
		<key>UISceneConfigurations</key>
		<dict>
			<key>UIWindowSceneSessionRoleApplication</key>
			<array>
				<dict>
					<key>UISceneConfigurationName</key>
					<string>Default Configuration</string>
					<key>UISceneDelegateClassName</key>
					<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
					<key>UISceneStoryboardFile</key>
					<string>Main</string>
				</dict>
			</array>
		</dict>
	</dict>
</dict>
</plist>

We tried also…

<key>NSAppTransportSecurity</key>
    <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
    </dict>

Zip with the demo project

AdaptiveCardsDemo.zip

[jwoo-msft]

@jwoo-msft - is it required for an iOS host to hand-register resolvers for http/https/data? If so, that should be added to the docs. Alternatively, maybe we should register those by default?

(mentioning #6316 for doc tracking)

@paulcam206, this is documented, but I will move it to more prominent place.

[paulcam206]

@jwoo-msft - is it required for an iOS host to hand-register resolvers for http/https/data? If so, that should be added to the docs. Alternatively, maybe we should register those by default?

(mentioning #6316 for doc tracking)