Alexa - How to send image to user?

Question

I'm using a Lambda function for my Alexa Skill. For my launch intent, I query DynamoDB and return a String that I first want to convert into a QRCode and then I want to return it to the Alexa Device as an Image inside the responseBuilder

Alexa works fine displaying images from external urls such as

const rabbitImage = "https://i.imgur.com/U6eF0oH.jpeg";

return responseBuilder
        .speak(say)
        .withStandardCard("Welcome to Alexa", "description", rabbitImage, rabbitImage)
        .reprompt('try again, ' + say)
        .getResponse();

But I'm stuck on how to send the QRCode back to the Alexa Device in the responseBuilder.

I'm using a nodejs library called qrcode that can convert the String into a QRCode and then into base64.

https://www.npmjs.com/package/qrcode

But according to the Alexa docs for sending a "card" aka image, back to the user it has to be a url.

https://developer.amazon.com/en-US/docs/alexa/custom-skills/include-a-card-in-your-skills-response.html

The Alexa Skills Kit provides different types of cards:

A Standard card also displays plain text, but can include an image. You provide the text for the title and content, and the URL for the image to display.

So I'm not sure if the base64 generated by the qrcode library would work in this case.

What's the best way to send the dynamically generated QRCode back to the Alexa Device as a response in this scenario?

const LaunchRequest_Handler = {
    canHandle(handlerInput) {
      const request = handlerInput.requestEnvelope.request;
      return request.type === 'LaunchRequest';
    },
    handle(handlerInput) {
      const responseBuilder = handlerInput.responseBuilder;


      //Perform query to DynamoDB

      var stringToCreateQRWith = "8306e21d-0c9e-4465-91e9-0cf86fca110d";

      //Generate qr code and send back to user here
      //???Unsure how to do and what format to send it in
      var qrImageToSendToUser = ???

      return responseBuilder
        .speak(say)
        .withStandardCard("Welcome to Alexa", "description", qrImageToSendToUser , qrImageToSendToUser )
        .reprompt('try again, ' + say)
        .getResponse();

    }

Answer 1

As @kopaka proposed, this is the way to go. There is no way around it.

As per the documentation

They are a few thing you need to have in mind.

On the images itself, you will want to create 2 images with 720px x 480px and 1200px x 800px. To make sure they display nicely on multiple screen size. Otherwise they do not guarantee the best experience for your user, as they may scale up/down the image to fit.

On the storage choice, you need to make sure to be able to serve those images via Https and with a valid ssl certificate trusted by amazon.