Alexa Presentation Language Image not displaying

Question

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.

score 0 · Answer 1 · answered Nov 09 '21 at 16:41

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.

Alexa Presentation Language Image not displaying

1 Answers1