如何在reactjs中动态更改元标记图像，以便在Facebook、WhatsApp或任何平台上共享链接

在Facebook、WhatsApp或任何平台上共享时，我需要显示链接的图像。 它在index.html中添加时起作用，但我需要在组件中添加图像，因为图像是动态的。我尝试使用react meta标记，但无效，请帮助我

return (
    <div className="wx-1120px border-box pxl-10px">
      <MetaTags>
        <title>title app.js</title>
        <meta property="og:site_name" content="The Rock Photo Studio" />
        <meta property="og:title" content="The Rock Photo Studio in Florida" />
        <meta
          property="og:description"
          content="The best photo studio for your events"
        />
        <meta
          property="og:image"
          content="https://thewedpostamit.s3.ap-southeast-1.amazonaws.com/1584017948002WK2_4905.jpg"
        />
        <meta property="og:type" content="website" />
        <meta property="og:image:type" content="image/jpg" />
        <meta property="og:image:width" content="300" />
        <meta property="og:image:height" content="300" />
        <meta
          property="og:url"
          content="https://thewedpost.com/stories/varsha-and-ram-from-college-sweethearts-to-happily-ever-after"
        />
      </MetaTags>
      <h3 className="wx-100precent fsx-48px din-bo alText-center mxb-15px">
        Test Title{" "}
      </h3>
      <img
        src="https://thewedpostamit.s3.ap-southeast-1.amazonaws.com/1584017948002WK2_4905.jpg"
        alt="test"
        height="300"
        width="300"
      />
      <p className="alText-center din-re fsx-14px color-HEX666666 mxb-30px">
        Published by - Test User | 8 minute read
      </p>

      <style jsx>{`
        .word-wrap {
          word-wrap: break-word;
          text-align: justify;
        }
      `}</style>
    </div>
  );

返回(
标题app.js
测试标题{“”}

发布人-测试用户| 8分钟阅读

{`
.自动换行{
单词包装：打断单词；
文本对齐：对齐；
}
`}
);

您好，您找到解决方案了吗？我在使用next.js和next.ja为head部分提供next/head模块。您好，您找到解决方案了吗？我在使用next.js和next.ja为head部分提供next/head模块。