Dustin Coates in Alexa

Alexa Skill Card image shown on Echo Show, but not on website

I ran into a problem recently with a Houston Astros baseball skill I was building. It turned out to be an easy fix, but it wasn’t easy to figure out what was going on. In short: my card images were showing up on the Echo Show, but not on the website or the Android app. I had done everything—I thought—that there was to do, but no dice.

Until I came across an answer from Amazon on the developer forums. It had to do with images not showing up in iOS. I had no iOS device nearby to know if that was an issue, but worth a shot. The problem, it turns out, has to do with CORS request restrictions. In situations where CORS requests aren’t limited, images should work fine.

However, in other situations (e.g. S3), both the http and https URLs need to be added for the site used inside the Alexa apps. The configuration is like so:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://ask-ifr-download.s3.amazonaws.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://ask-ifr-download.s3.amazonaws.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

You can change this in your S3 bucket by going to the bucket, then clicking on Permissions:

AWS Permissions Tab

Then select CORS configuration and paste the previous XML in the box before hitting save.