I can only get certain images to display whether using an Alexa device or the Alexa console (https://developer.amazon.com/alexa/console/ask/displays#/templates):
For example, this works:
{
"type": "APL",
"version": "1.8",
"license": "",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "AlexaImage",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
}
]
}
}
But this does not work:
{
"type": "APL",
"version": "1.8",
"license": "",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "AlexaImage",
"imageSource": "https://www.solopianoradio.com/apps/alexa/wspr_logo_512.png"
}
]
}
}
I've tried changing types ("AlexaDetail", "Image", "AlexaImage"), height, width, scale, image type (png vs jpg) and other options, but this image and many others simply will not display.
Response from the Alexa Developer Support team was that the site that hosts the files must include "AllwedOrigins" as "*" and "AllowedMethods" as "GET" in the returning header. See (https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-support-for-your-skill.html#support-cors)
This is tricky since my skill is using iTunes API and I have no control over the returned header from the iTunes server. Probably going to have to proxy it instead.