如何通过网站设置 iOS 共享表的缩略图？答案

【问题标题】：How to set thumbnail for iOS share sheet via website?如何通过网站设置 iOS 共享表的缩略图？
【发布时间】：2020-07-22 08:30:49
【问题描述】：

我试图弄清楚如何在 iPhone 中显示共享表的缩略图（我已为我所指的图标附加了图像）。此功能似乎仅适用于 ios 13。我不确定图像/图标是从哪里获取的。我已经在网站上正确设置了 favicon 和 og:image 的路径，但是图像没有被拾取。

目前，对于我使用/assets/favicon.ico 作为图标和og:image 的路径。图片应该是www.domain-name.com//assests/favicon.ico吗？我无法从苹果部分找到任何关于此的文档。

对于 navigator.share，它没有共享图标的任何细节，我们只能传递文本、URL、描述和文件，我相信 navigator.share 不对图像负责。应该从 icon 或 og:image 中获取图像/图标。

非常感谢任何建议或提示。

【问题讨论】：

如果配置正确，我怀疑是不是因为缓存导致你看不到正确的结果。如果您的网站缓存在 cdn 上，您是否尝试过清理缓存或尝试清理 cdn？
目前没有缓存，是一个 WIP 站点。但是，在本地测试时，此问题仍然存在。你有什么建议来测试它吗？也很好奇它从哪里获取图像，我找不到文档。
阅读developer.mozilla.org/en-US/docs/Learn/HTML/…也许它会给你一些提示，也是我个人的经验。如果我部署了正确配置公用文件夹的反应项目。网站图标不会造成任何麻烦。所以我想知道你是如何部署你的项目的。
@zhoujialei，谢谢我找到了解决方案，但看起来不太好

【解决方案1】：

经过一番尝试，我想出了解决方案。

问题：

我想在使用本机共享功能时显示 ios 13 设备的缩略图（从网站上提取）。

期望：

每当我从浏览器使用本机共享并显示标题和文本以及图像时

代码：

const title = 'Website Name'
const text = 'Welcome to the website'
const url = 'beer_and_melons.com'
    
navigator.share ( {title,text,url});

限制：如果我想显示网站徽标，我不能传递文本字段。即

navigator.share ({url})

这样，爬虫将通过您的网站并拾取图标（not og:image）

结论：

文字和图片不能同时使用，需要妥协！

以下是图片，注意我没有添加任何文字

以下是带有文本字段的图片

希望这对某人有所帮助，并且不会浪费一整天的时间来寻找解决方案！

愿原力与你同在！

【讨论】：