Next js app无法在chrome上正确呈现

hgb9j2n6  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(173)

我在我的应用程序中使用了nextjs和tailwind css,它在chrome上崩溃了。我不知道为什么会发生这种情况。
图像没有正确加载&一旦加载,它们就会消失。我使用nextjs Image标记来渲染图像。下面是我渲染图像的方法:

import Image from 'next/image';
const Tech = ({ icon, text }) => (
  <div className='flex flex-col justify-between gap-2 bg-[rgba(21,21,21,0.15)] px-2.5   py-4'>
    <Image src={icon} alt={text} />
    <p className='text-sm leading-4'>{text}</p>
  </div>
);

export default Tech;

您可以检查它here
以下是一些随附的快照:

在此输入图像描述

顺便说一句,它在Firefox上运行得很好。

2fjabf4q

2fjabf4q1#

这是由于backdrop-filter CSS属性,因为它的UI非常昂贵。我用不透明替换了它。

相关问题