question

Stephen Manning avatar image
Stephen Manning asked

Images not displaying in Alexa test console

Images not displaying in Alexa test console. They display perfectly on a device but not at all in the development test console.

testingalexa simulator
10 |5000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Andy Whitworth avatar image
Andy Whitworth answered

As Chihiro stated above, this is a CORS issue. You need to allow developer.amazon.com to access your images in your S3 bucket CORS settings. It's pretty easy to do.

Go to your S3 web control page, select your bucket and then click on the "permissions" tab.

Scroll down the permissions until you see the CORS settings. Select "edit" and paste in the following:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Origin",
            "Access-Control-Allow-Origin",
            "Access-Control-Request-Headers",
            "Access-Control-Request-Method"
        ]
    }
]

Save that and you're good. You may need to clear your browser cache for the dev console to start working with the images.

This will allow access to the images from *everywhere*, if you want to restrict access then modify the "AllowedOrigins" array contents.

1 comment
10 |5000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Thanks for that! Strange they block S3 though.
0 Likes 0 ·
Chihiro@Amazon avatar image
Chihiro@Amazon answered

Hi Stephen,

Thank you for posting. Configure Cross-Origin Resource Sharing (CORS) is now enforced on Alexa Developer Console. Please make sure your image endpoint has valid SSL certificate and correct header "Access-Control-Allow-Origin".

Configure Cross-Origin Resource Sharing (CORS) for resources:
https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-support-for-your-skill.html#support-cors

1 comment
10 |5000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

It blocks images from S3. When I test on any device there is no problem. The images show whether on S3 or on my web site which has an SSL certificate. Its just in the test environment images are blocked. I suspect it may have something to do with me provisioning my own end point.

0 Likes 0 ·
Stephen Manning avatar image
Stephen Manning answered

It blocks images from S3. When I test on any device there is no problem. The images show whether on S3 or on my web site which has an SSL certificate. Its just in the test environment images are blocked. I suspect it may have something to do with me provisioning my own end point.

10 |5000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.