9

在我所有的分享按钮中,我的图片不只显示网址

在我的公用文件夹 html 标题中

    <meta content="`%PUBLIC_URL%/${picture.jpg}`">
    <meta property="og:description" content='' />

在我的详细信息组件中,我使用 react-helmet 动态地将标题放在共享按钮的位置。

  render() { 
    const { project, auth } = this.props;
    const shareUrl = window.location.href; 
    const articleId = this.props.match.params.id; 
    const {pathname} = this.props.location;
    const imageURL = '';

    if (project) {

      return (
        <div className="container">

头盔组件

          <Helmet>
              <meta charSet="utf-8" />
              <title>{project.title}</title>
              <meta property="og:url" content={`https://l.facebook.com/l.php?u=https%3A%2F%2F${shareUrl?shareUrl:''}`} />
              <meta property="og:description" content={project.title} />
              <meta property="og:image" content={imageURL!==''?`${project.pictureUrl}`: ''} />
              <meta property="fb:app_id" content="198985484382564" />
          </Helmet>

当分享到 Facebook 时,我得到了什么

苏丹抗议者与警方发生冲突,造成 8 人死亡https://firebasestorage.googleapis.com/v0/b/dsdnewsapi.appspot.com/o/projectPics%2F824b9ec1-e708-455e-acce-9bbd40d2b24a.JPG?alt=media&token=137f1738 -5cc3-4596-8373-d74f6699799a

只是图片网址,但图片未显示。

            <FacebookShareButton
              url={shareUrl}
              imageURL={project.pictureUrl}
              quote={project.title} 
              className="m-2">
              <FacebookIcon size={32} round={true} />
            </FacebookShareButton>

而google plus是 https://plus.google.com/up/?continue=https://plus.google.com/share?url%3Dhttps://dsdnews.de/project/xLJZmsOUZTI00Z7bmblo

            <GooglePlusShareButton
              url={shareUrl}
              title={project.title}
              media={project.pictureUrl}
              className="m-2">
              <GooglePlusIcon size={32} round={true} />
            </GooglePlusShareButton>

对于推特,这就是我得到的

突发新闻... BUHARI 76 岁生日并邀请 SAGA。https://firebasestorage.googleapis.com/v0/b/dsdnewsapi.appspot.com/o/projectPics%2Ff862995d-f93f-4684-8ad4-52e2fde6324c.png?alt=media&token=287de96d-b2b8-4c7d-a327-5143f7ad4ac5

https://dsdnews.de/project/xLJZmsOUZTI00Z7bmblo

            <TwitterShareButton
              url={shareUrl}
              title={`${project.title} ${project.pictureUrl}`}
              media={project.pictureUrl}
              className="m-2">
              <TwitterIcon size={32} round={true} />
            </TwitterShareButton>

和whatsappp是

突发新闻... BUHARI 76 岁生日并邀请 SAGA。https://firebasestorage.googleapis.com/v0/b/dsdnewsapi.appspot.com/o/projectPics%2Ff862995d-f93f-4684-8ad4-52e2fde6324c.png?alt=media&token=287de96d-b2b8-4c7d-a327-5143f7ad4ac5

https://dsdnews.de/project/xLJZmsOUZTI00Z7bmblo

            <WhatsappShareButton
              url={shareUrl}
              title= {`${project.title} ${project.pictureUrl}`}
              media={project.pictureUrl}
              className="m-2">
              <WhatsappIcon size={32} round={true} />
            </WhatsappShareButton>

            <LinkedinShareButton
              url={shareUrl}
              title={project.title}
              media={project.pictureUrl}
              className="m-2">
              <LinkedinIcon size={32} round={true} />
            </LinkedinShareButton>

            <EmailShareButton
              url={shareUrl}
              title={project.title}
              media={project.pictureUrl}
              className="Demo__some-network__share-button m-2">
              <EmailIcon size={32} round={true} />
            </EmailShareButton>
            </div>
          </div>

        </div>
      )
    } 

  }
4

1 回答 1

-1

您已经传递imageURL给您的组件,但您正在阅读pictureUrl以显示它们。

于 2020-07-27T06:00:03.307 回答