时间戳

首页 > 解决方案 > React Thumbnail Preview when posting/ sharing links of URL

reactjs - React Thumbnail Preview when posting/ sharing links of URL

问题描述

I'm trying to get preview of the page from different links within my react project but it's only showing the index.html "home" preview. I understand React is a SPA, but is there a module or a method to display previews/ thumbnails when I'm sharing/ posting these links? I'm using a headless CMS with Wordpress as the backend with API calls. I would like to post preview/ thumbnails of the articles/ etc.. I create.

example: www.foxnews.com enter image description here

标签： reactjswordpressthumbnailspreview

解决方案

我有同样的问题，这就是我解决它的方法

我已经在页面网站中添加了缩略图，可以从路线访问（你想给他一个缩略图）
作为页面的第一个元素（或者至少是你的第一张图片）

因为：缩略图链接拍摄了您网站的第一张照片

然后用 Css 确保图片不会出现，但是！警告 ！不要那样做：

display : none

因为它将作为已删除的图片，不会被考虑

这是我如何做到的一个例子！

在页面的 .jsx 文件中

<div className="thumbnail">
      <img src="/thumbnails/landing.png" alt=""/>
</div>

这是 sass 中的样式与 css 中的样式相同

.thumbnail
    position : absolute
    top : 0 
    z-index : -5000
    width : 0px
    height : 0px
    img
        object-fit : cover
        width : 0px
        height : 0px

推荐阅读