Next.js+Tailwind CSS应用在Chrome中渲染异常，图片加载后消失

Next.js 组件在Chrome中加载后消失，Firefox正常的解决方案 #

使用Next.js结合Tailwind CSS开发的应用，出现Chrome浏览器中图片加载后随即消失，但Firefox完全正常的问题，组件代码如下：

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;

以下是针对性的排查和解决方法：

• 明确指定组件的尺寸
  Next.js的组件依赖明确的尺寸信息进行布局计算，Chrome对尺寸缺失的容错性低于Firefox。可以直接添加固定宽高：

  <Image src={icon} alt={text} width={48} height={48} />
  

  若需要响应式布局，可通过父容器相对定位配合fill属性实现：

  <div className="relative w-12 h-12">
    <Image src={icon} alt={text} fill objectFit="contain" />
  </div>
  

• 排查Tailwind样式冲突
  父容器的flex-col justify-between可能导致Chrome中图片容器高度计算异常。尝试调整父容器的对齐方式，比如将justify-between替换为items-center，或给图片外层添加固定尺寸的容器，观察是否解决问题。

• 关闭Chrome硬件加速
  部分Chrome版本的硬件加速会引发图片渲染异常。进入Chrome设置，找到系统选项，关闭使用硬件加速模式（如果可用），重启浏览器后测试。

• 清理缓存并验证图片格式
  清除Chrome浏览器缓存，避免旧的缓存资源干扰。同时确认图片格式（如WebP、PNG）在Chrome中兼容，若使用WebP可尝试替换为PNG测试。

• 检查Next.js图片域名配置
  如果图片来自外部域名，需在next.config.js中配置允许的图片域名，否则可能因权限问题导致图片加载后被隐藏：

  module.exports = {
    images: {
      domains: ['你的图片域名'],
    },
  };
  

内容的提问来源于stack exchange，提问作者Hafiz Muhammad Bilal