Generic template image_url does not load in Messenger - Facebook Messenger Platform

Question

I am using the Facebook Messenger Platform to create a generic template. I am currently using ngrok to test locally, and the image_url I input for the generic template never shows in Messenger. The generic template is sent, and the image is just blank. Using Inspect, I can see that the CSS for the image is:

background-image: url("https://external.xx.fbcdn.net/safe_image.php?d=AQA1nM3pKJnllzq0&url=https%3A%2F%2Fdc3858ef.ngrok.io%2Fassets%2Fimages%2Fvideo_image.jpg&_nc_hash=AQAlBOE-vbT8cl-i");

If I open this URL, it is just a black screen with one white pixel in the middle. Here is the message data that I use:

 messageData = {
              recipient: {
                id: senderID
              },
              message:{
                attachment:{
                  type: "template",
                  payload: {
                    template_type: "generic",
                    elements: [
                      {
                        title:"Test Video Link",
                        image_url: MY-NGROK_DOMAIN + "/assets/images/video_image.jpg",
                        subtitle: "Check out this video!",
                        default_action: {
                          type: "web_url",
                          url: "www.google.com"
                        }
                      }
                    ]
                  }
                }
              }
            };

This image_url works fine if I open it in a browser. Similarly, if I create an 'image' type message data rather than 'template', this image is loaded in Messenger.

How can I get my image_url to load properly for a generic template?

Answer 1

I have the same issue. I and the problem appears when the webhook domain is the same as the image url. If you use an image on a different server, it works.