反应中的动态开放图

问题描述

这是我网站上的动态页面：link

我在此页面上将所有这些代码作为元标记用于动态图标，动态标题，动态说明以及在Whatsapp，Facebook等中共享时最重要的动态打开图（例如og：image）。

import React,{ useState } from "react";
import Helmet from "react-helmet";
import Favicon from 'react-favicon';
import MetaTags from 'react-Meta-tags';

export default function MetaData(props) {
    const [Meta] = useState({
        name: props.name,description: props.description,ogUrl: props.ogUrl,imgurl: "https://bucard.co.il/server/public/images/uploads/1601487360190-meat-shop-logo_71835-89.jpg"
    });
    
    return (
        <>
            <MetaTags>
                <Meta name="title" content={`Digital Card Of ${Meta.name}`} />
                <Meta
                    name="description"
                    content={Meta.description}
                />

                <Meta property="og:title" content={`Digital Card Of ${Meta.name}`} />
                {Meta.imgurl && <Meta property="og:image" content={Meta.imgurl} />}
                <Meta
                    property="og:description"
                    content={Meta.description}
                />
                <Meta property="og:url" content={Meta.ogUrl} />
            </MetaTags>
            <Helmet>
                <title>{`Digital Card Of ${Meta.name}`}</title>
                {Meta.imgurl && <link rel="icon" href={Meta.imgurl}></link>}
                <Meta name="title" content={`Digital Card Of ${Meta.name}`} />
                <Meta
                    name="description"
                    content={Meta.description}
                />
                <Meta property="og:title" content={`Digital Card Of ${Meta.name}`} />
                {Meta.imgurl && <Meta property="og:image" content={Meta.imgurl} />}
                <Meta
                    property="og:description"
                    content={Meta.description}
                />
                <Meta property="og:url" content={Meta.ogUrl} />
            </Helmet>
            {Meta.imgurl && <Favicon url={Meta.imgurl} />}
        </>
    );
}

现在，如果您输入到上一页的链接，则按f12键，您可以看到头部的og：image恰到好处-

<Meta property="og:image" content="https://bucard.co.il/server/public/images/uploads/1601487360190-meat-shop-logo_71835-89.jpg">

，但是例如在Whasapp上共享页面时，该图像没有显示，而是呈现了网站图标。

Snapshot of the rendered image when sharing

有什么需要帮助的吗？我只需要og：image即可：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）