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