使用 react.js react-share 在社交网络上分享图片

如何解决使用 react.js react-share 在社交网络上分享图片

我正在尝试在 reactjs 应用程序中的社交媒体（主要是 FB、twitter、linkedIn）上分享图片和视频，已经添加了相同的 react-helmet 但仍然无法分享下面的图片是我所指的链接和我的代码。

https://medium.com/camperstribe/react-social-media-integration-with-react-share-and-react-helmet-84d9def6a445

以上解决方案无效

import React from "react";
import { Helmet } from "react-helmet";
// import { useLocation } from "react-router-dom";
export default function HelmetMetaData(props) {


  // let location = useLocation();
  let quote = props.quote !== undefined ? props.quote : "";

  let title =
    props.title !== undefined
      ? props.title
      : "CampersTribe - World is yours to explore";
  let image =
    props.image !== undefined
      ? props.image
      : "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80";
  let description =
    props.description !== undefined
      ? props.description
      : "CampersTribe lets you experience the camping culture. We discover the hidden gems in the nearby to help you connect with nature & yourself by learning in the woods,on the riverbank under the open sky." +
        "Trust us,its million dollars experience to ride away from city life,pitch a tent,do campfire and endless talk!" +
        "So,join us on this voyage,and explore the beauty and miracle of being yourself!";
  let hashtag = props.hashtag !== undefined ? props.hashtag : "#camperstribe";
  return (
    <Helmet>
      <title>{title}</title>
      <Meta charset="utf-8" />
      <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <Meta name="csrf_token" content="" />
      <Meta property="type" content="website" />
      <Meta
        name="viewport"
        content="width=device-width,initial-scale=1,shrink-to-fit=no"
      />
      <Meta name="msapplication-TileColor" content="#ffffff" />
      <Meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
      <Meta name="theme-color" content="#ffffff" />
      <Meta name="_token" content="" />
      <Meta name="robots" content="noodp" />
      <Meta property="title" content={title} data-react-helmet="true"/>
      <Meta property="quote" content={quote} data-react-helmet="true"/>
      <Meta name="description" content={description} data-react-helmet="true"/>
      <Meta property="image" content={image} data-react-helmet="true"/>
      <Meta property="og:locale" content="en_US" />
      <Meta property="og:type" content="website" />
      <Meta property="og:title" content={title} />
      <Meta property="og:quote" content={quote} />
      <Meta property="og:hashtag" content={hashtag} />
      <Meta property="og:image" content={image} data-react-helmet="true"/>
      <Meta property="og:image:secure_url" content={image} data-react-helmet="true"/>
      <Meta content="image/*" property="og:image:type" data-react-helmet="true"/>
      <Meta property="og:site_name" content="CampersTribe" />
      <Meta property="og:description" content={description} />{" "}
    </Helmet>
  );
}

我已经创建了头盔元数据组件并调用了我的社交分享组件

 return (
    <div className="app-content content">
      <HelmetMetaData />

 <FacebookShareButton
                            windowWidth="800"
                            windowHeight="500"
                            url={
                              "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
                            }
                            quote={"test sharing"}
                            image={
                              "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
                            }
                            imageURL={
                              "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
                            }
                            // hashtag="#camperstribe"
                            // className={classes.socialMediaButton}
                          >
                            <FacebookIcon size={36} />
                          </FacebookShareButton>
)

但不能只在 facebook 共享对话框上获取 url 和标题， 有人知道如何在 reactjs 中在社交媒体上分享图片吗？

解决方法

我知道这是一个老问题，但尝试将图像元标记直接插入 google-services.json。正如 this issue 中所说：在客户端动态添加元数据不起作用。爬虫（fb、tw 等）只能看到静态 html。并且似乎 .crop-left { clip-path: inset(0 50px 0 0); } .crop-right { clip-path: inset(0 0 0 50px); } .crop-top { clip-path: inset(0 0 50px 0); } .crop-bottom { clip-path: inset(50px 0 0 0); } 没有 public/index.html 作为可选道具。