[Question] Images in HeroCard not loaded on FB Messenger?

[fcioffi]

Hi guys,

i have the next issue.

Sending an images in hero card it not loaded on Facebook, if I send it as attachment it showed correctly.

Can you help me?

Thanks, Francesco

let address = {}; // hidden here

    userBot.loadSession(address, (err, session) => {

        var msg = new builder.Message(session);
        msg.attachmentLayout(builder.AttachmentLayout.carousel)
        msg.attachments([
            new builder.HeroCard(session)
                .title("Classic White T-Shirt")
                .subtitle("100% Soft and Luxurious Cotton")
                .text("Price is $25 and carried in sizes (S, M, L, and XL)")
                .images([builder.CardImage.create(session, 'https://numina-services.eu.ngrok.io/api/v1.0.0/resources/conversationThumbnail/18?updatedAt=1502294140000')])
                .buttons([
                    builder.CardAction.imBack(session, "buy classic white t-shirt", "Buy")
                ]),
            new builder.HeroCard(session)
                .title("Classic Gray T-Shirt")
                .subtitle("100% Soft and Luxurious Cotton")
                .text("Price is $25 and carried in sizes (S, M, L, and XL)")
                .images([builder.CardImage.create(session, 'https://numina-services.eu.ngrok.io/api/v1.0.0/resources/conversationThumbnail/18?updatedAt=1502294140000')])
                .buttons([
                    builder.CardAction.imBack(session, "buy classic gray t-shirt", "Buy")
                ])
        ]);
        session.send(msg);

        var msg2 = new builder.Message(session);
        msg2.addAttachment({
            contentType: 'image/png',
            contentUrl: 'https://numina-services.eu.ngrok.io/api/v1.0.0/resources/conversationThumbnail/18?updatedAt=1502294140000'
        })
        session.send(msg2)

[nwhitmont]

@fcioffi You need to host your image files in a permanent location like on your bot's server, or other file storage, blob storage or otherwise. Currently, your image file URLs do not resolve, so they can't be used by any channel.

[fcioffi]

Hi @nwhitmont, now it not resolve because my pc is down, but when I'm testing is was up and running.

As attachment it displayed and in hero card not. The same URL.

Thanks, Francesco

[maximilianspringer]

I am having the same issue. The image is shown when using WebChat and it is also schown on FB when sent as attachment. But not as part of a HeroCard. @fcioffi, did you find a solution?

[fcioffi]

Unfortunately not at moment

[magols]

I'm having the same issue regarding no images in Herocard on FB Messenger. Images show up in fine in Skype and Webchat channels. I am using the C# SDK.

[magols]

Ok, so I solved my issue. The problem was that I had gotten some image urls in there that weren't properly URL encoded. Images would work in WebChat and Skype but Messenger doesn't load the images directly. It proxies them via their https://external-atl3-1.xx.fbcdn.net/safe_image.php?d=somekey&url=myimageurl endpoint. And there the 'myimageurl' got all messed up if not properly encoded.

[anton-bot]

Can confirm that Messenger won't accept any images where URL contains spaces and other unencoded characters.

[jhenriquez]

This is a sample image that safe_image won't even try:

https://e28c2a48.ngrok.io/cdn/bot/4aab3c90-50bc-11e8-b879-13a5eadfd911.jpg?time=1525576280707

And this is it's encoded version it is trying to access:

https%3A%2F%2Fe28c2a48.ngrok.io%2Fcdn%2Fbot%2F4aab3c90-50bc-11e8-b879-13a5eadfd911.jpg%3Ftime%3D1525576280707

@catcher-in-the-try I wouldn't know if there are any invalid chars there. Certainly no spaces. Any suggestions what I should be looking for that could be preventing safe_image from even trying this url?