Alexa skill developed in node.js doesn't display any card

549 Views Asked by At

Alexa skill developed in node.js doesn't display any card in the home page of the Alexa app, for Simple or Standard Card type with npm package 'alexa-sdk' . It seems there's an issue in the 'Alexa-sdk' package's response.js file. I used the following method

'THREE_D_QuestionIntent': function() {

    let reply = " Here’s a list"
    let speechOutput = reply;
    let repromptSpeech = "Question";
    let cardTitle = resultCardTitle;
    let cardContent = "Result is ";
    let imageObj = "https://s3.amazonaws.com/visitmadison/HTML/shape.png";

    console.log(speechOutput);

    this.emit(':askWithCard', speechOutput, repromptSpeech, cardTitle, cardContent, imageObj);
  }
1

There are 1 best solutions below

2
On BEST ANSWER

For Standard Alexa cards with image you have include an image object with smallImageUrl and largeImageUrl properties. smallImageUrl and largeImageUrl are the URLs of a small and large version of the image to display.

For example, the response JSON will have:

...
"card": {
      "type": "Standard",
      "title": "Ordering a Car",
      "text": "Your ride is on the way",
      "image": {
        "smallImageUrl": "https://carfu.com/resources/card-images/race-car-small.png",
        "largeImageUrl": "https://carfu.com/resources/card-images/race-car-large.png"
      }
    }
...

Update your code with an image object having both smallImageUrl and largeImageUrl

var speechOutput = 'your speech here';
var repromptSpeech = 'your re prompt here';
var cardTitle = 'card title here';
var cardContent = 'card content here';
var imageObj = {
   "smallImageUrl": "https://carfu.com/resources/card-images/race-car-small.png",
   "largeImageUrl": "https://carfu.com/resources/card-images/race-car-large.png"
};
this.emit(':askWithCard', speechOutput, repromptSpeech, cardTitle, cardContent, imageObj);

More about Standard Card here

Card images must meet certain conditions like:

  1. Image Format and Size
  2. Hosting the Images