Alexa Skills Kit：如何使用JS将图像添加到标准卡中

Question

我一直在构建alexa-skills-kit-js / samples /中的示例

但他们没有任何将图像添加到响应卡的位置。

response.askWithCard(speechOutput, repromptOutput, cardTitle, cardContent);

图像在哪里？ cardContent通常是一个字符串。 我只是把它变成一个包含图像的对象......？

Answer 1

我在Mark Stringer的亚马逊开发者支持论坛上回答了类似的问题：

我一直在努力解决这个问题，现在让它发挥作用。 如果您使用亚马逊提供的示例AlexaSkill.js模块，那么您需要添加几个部分来处理图片卡。

在buildSpeechletResponse部分中，在类似的类型“Simple”部分之后添加：

  if (options.cardSmallImageURL && options.cardLargeImageURL) { alexaResponse.card = { type: "Standard", title: options.cardTitle, text: options.cardContent, image: { smallImageUrl: options.cardSmallImageURL, largeImageUrl: options.cardLargeImageURL } }; } 

然后在askWithCard定义后再向下添加：

  askWithPictureCard: function(speechOutput, repromptSpeech, cardTitle, cardContent, smallImageURL, largeImageURL) { this._context.succeed(buildSpeechletResponse({ session: this._session, output: speechOutput, reprompt: repromptSpeech, cardTitle: cardTitle, cardContent: cardContent, cardSmallImageURL: smallImageURL, cardLargeImageURL: largeImageURL, shouldEndSession: false })); 

现在你可以调用它，可能使用变量而不是我使用的测试常量;

response.askWithPictureCard（'这是语音输出'，'这是重复'，'这是卡片标题'，'这是卡片文字，注意该字段被称为文字而不是卡片内容'，' https：// s3 .amazonaws.com / thisisthesmallpictureurl-small.jpg '，' https： //s3.amazonaws.com/thisisthebigpictureurl-big.jpg '）;

然后按照类似的过程添加tellWithPictureCard函数。

在代码中有一个小错字，Stringer在他的意思是卡片时我把卡片放在上面的贴纸中。 除此之外，这种方法对我有用。

Answer 2

不幸的是，看起来“简单”是硬编码的，小型和大型图像URL需要“标准”卡。 这是代码

https://github.com/amzn/alexa-skills-kit-js/blob/master/samples/historyBuff/src/AlexaSkill.js#L142

    if (options.cardTitle && options.cardContent) {
        alexaResponse.card = {
            type: "Simple",
            title: options.cardTitle,
            content: options.cardContent
        };
    }

您需要修改AlexaSkill.js的本地副本才能添加功能。

以下是Flask-Ask库（我的）的API用法，展示了卡的工作原理：

https://johnwheeler.org/flask-ask/responses.html#displaying-cards-in-the-alexa-smartphone-tablet-app