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

Posted 2023-04-14

【中文标题】Alexa Skills Kit：如何使用 JS 将图像添加到标准卡片

【英文标题】：Alexa Skills Kit: How to add an image to a standard card using JS

【发布时间】：2016-09-29 20:50:34

【问题描述】：

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

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

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

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

【参考方案1】：

我通过reply 关注了 Mark Stringer 在亚马逊开发者支持论坛上提出的类似问题：

我自己一直在努力解决这个问题，现在它可以工作了。如果 您正在使用亚马逊提供的示例 AlexaSkill.js 模块 你需要添加几个部分来处理图片卡。

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

    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
        ));

现在你可以调用它了，可能使用变量而不是常量 I 正在使用 using 进行测试；

response.askWithPictureCard('这是语音输出', '这是 reprompt', '这是卡片标题', '这是卡片文字，注意 字段称为文本而不是 cardContent'， 'https://s3.amazonaws.com/thisisthesmallpictureurl-small.jpg', 'https://s3.amazonaws.com/thisisthebigpictureurl-big.jpg');

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

代码中有一个小错字，Stringer 在他的意思是 card 时输入了 crd，我在上面的粘贴中进行了更正。除此之外，这种方法对我有用。

【参考方案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