通用模板图片在Facebook Messenger平台上无法加载

Question

我正在使用Facebook Messenger平台创建一个通用模板。 我目前正在使用ngrok在本地测试，而我为通用模板输入的image_url从未在Messenger中显示。 发送了通用模板，但图像只是空白。 使用Inspect，我可以看到图像的CSS是：

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

如果我打开这个URL，就只会看到一个黑屏，中间有一个白色的像素。

以下是我使用的消息数据：

 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"
                        }
                      }
                    ]
                  }
                }
              }
            };

如果我在浏览器中打开这个image_url，它可以正常工作。同样，如果我创建一个“图像”类型的消息数据而不是“模板”，则这个图像将在Messenger中加载。

我如何让我的image_url在通用模板中正确加载？

- userwithquestions

---

我遇到了完全相同的问题。从非ngrok域名显示完全相同的图像。 - Ceebs

Answer 1

我有同样的问题。我已经将我的本地Web应用程序放在ngrok后面。直接在浏览器中请求图像可以正常工作，但是当通过Facebook的safe_image.php脚本加载时，它会显示一个空白图像。经过大量调试，发现是隧道服务本身的问题。我切换到另一个服务（localtunnel），那里它可以正常工作。

还可以在FB上注册的此问题上找到更多信息：

https://developers.facebook.com/support/bugs/2151860088174161/

更新

已联系ngrok并快速获得回复，这是由于Facebook阻止了该脚本使用ngrok。

- Christophe Geers

Answer 2

我有同样的问题。当Webhook域与图像URL相同时，问题就会出现。如果您使用不同服务器上的图像，则可以正常工作。

- Leon Lahoud

---

谢谢！这正是发生的事情。 - userwithquestions

请确保在节点回复中发送结束。这似乎已经为我解决了问题。 - Leon Lahoud

@LeonLahoud 你说的“the end”是什么意思？ - Amio.io

@userwithquestions 当您开始使用不同的域名提供图像时，您是否也使用了ngrok？ - jhenriquez

有相同的问题，在Java Web应用程序中提供图像。在浏览器中，图像加载正常，当通过safe_image.php请求时，我得到一张空白图片。 - Christophe Geers

实际上，这不是问题所在。Facebook不会接受来自任何*.ngrok.io子域的资源链接，例如图像等。原因是大多数开发人员使用随机的一次性用户ngrok.io域，这些域名会过期。由于损坏链接数量较高，Facebook对此存在问题。您必须使用保留域名的ngrok来检索图像。 - code5