时间戳

首页 > 解决方案 > API 调用后 HTML 视频不适合 - next.js 和 styled-components

html - API 调用后 HTML 视频不适合 - next.js 和 styled-components

问题描述

我有这个 Facebook 克隆，用户应该能够发布视频、发布出版物等所有内容。

我的应用程序中的问题是，每次我进行操作时，例如点赞 pub 或创建评论，它都会对服务器进行 API 调用，并且因为我在 API 之前将 SWR 钩子与 Next.js 一起使用调用我必须改变我的缓存（数据），这使得数据重新渲染可以这么说，并且应用程序中的视频瞬间消失。这导致容器的高度与之前的视频相匹配，例如25vh，当视频消失时容器变为22vh，这些会3vh提供糟糕的体验，因为如果我喜欢一个帖子，用户会觉得屏幕无缘无故地移动了可以这么说。

我该怎么做才能让我的 HTML 标签视频，即使它可能不存在，我希望它具有适合容器所需的高度（因为我不希望所有视频都具有相同的高度，其中一些可能是大，其中一些小）。

让我给你看一些代码。

当我喜欢酒吧

const LikePub = async (): Promise<void> => {}

这是视频

{/* Image */}
{publication.photo && (
    <PubImage>
        {publication.photo.split("")[5] === "v" ? (
            <video
              // src={publication.photo}
              controls={onVideo}
              onMouseOver={() => setOnVideo(true)}
              onMouseOut={() => setOnVideo(false)}
            >
              <source src={publication.photo} />
            </video>
        ) : (
            <img src={publication.photo} alt="" />
        )}
    </PubImage>
)}

这些是风格

// PubImage

export const PubImage = styles.div`
    width: 100%;
    img, video {
        width: 100%;
        min-height: 28vh;
        max-height: 80vh;
        object-fit: cover;
        display: block;
    }
`;

我能做些什么？我是否必须为所有视频设置相同的高度（我不希望这样）？

标签： htmlreactjsnext.jsstyled-components

解决方案

我找不到我想要的答案，如果您可能遇到类似的问题，只需直接设置属性高度即可，因此视频和容器将具有相同的度量

推荐阅读