在我所有的分享按钮中,我的图片不只显示网址
在我的公用文件夹 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>
)
}
}