React-share教程：如何传递图片作为缩略图？

一、Facebook分享添加缩略图 #

react-share的FacebookShareButton组件支持直接通过picture参数传入缩略图URL，修改代码如下：

<FacebookShareButton
    url={openShare.link}
    picture={openShare.imageUrl} // 替换为你的缩略图公开URL
    onClick={() => handleClose() }
>
    <FacebookIcon size={40} round={true} />
</FacebookShareButton>

更稳妥的方式是给分享目标页面添加OG标签（在页面的<head>中插入），Facebook会优先读取这些标签内容，确保分享时缩略图稳定显示：

<meta property="og:image" content="你的缩略图URL" />
<meta property="og:image:width" content="1200" /> <!-- 推荐尺寸，符合平台规范 -->
<meta property="og:image:height" content="630" />

二、WhatsApp分享添加缩略图 #

WhatsApp不支持通过分享按钮参数直接传递图片，必须依赖分享目标页面的OG标签或Twitter卡片标签来识别缩略图。在目标页面的<head>中添加：

<meta property="og:image" content="你的缩略图URL" />
<meta name="twitter:image" content="你的缩略图URL" />

分享按钮代码不需要额外修改，保持原有结构即可：

<WhatsappShareButton
    url={openShare.link}
    onClick={() => handleClose()}
>
    <WhatsappIcon size={40} round={true} />
</WhatsappShareButton>

通用注意事项 #

• 缩略图URL必须是公开可访问的HTTPS链接，本地路径或需权限的链接无法被平台识别
• 图片尺寸建议符合各平台规范：Facebook推荐1200x630，WhatsApp建议至少300x200，比例优先1:1或1.91:1
• 确保图片加载速度快，避免分享时因加载超时导致缩略图不显示

内容的提问来源于stack exchange，提问作者user15361826