Next.js搭配Tailwind使用img/svg标签展示logo时不显示的奇怪bug

问题根因 #

• 错误使用srcset属性替代src：srcset仅用于响应式图片适配场景，不能替代原生src属性，部分浏览器在缺少src属性时不会触发图片资源加载。
• 未设置图片宽高：Tailwind 默认给img标签设置max-width: 100%、height: auto规则，删除带文本的<a>标签后，父容器没有内容撑开宽高，图片会被渲染为0宽0高的元素，自然无法显示。
• 静态资源路径错误：Next.js 中存放在public目录下的静态资源，引用时路径需要以/开头，否则会被识别为相对当前页面路由的路径，容易出现404。

修复方案 #

方案1：修复原生img标签属性 #

补全src属性、明确设置图片宽高，修正资源路径：

<div className="fixed top-0 right-0 p-4">
  <img 
    alt="logo" 
    src="/svg/logo_white.svg"
    width={48}
    height={48}
    className="h-12 w-auto transition duration-200 filter drop-shadow"
  />
</div>

方案2：使用Next.js官方推荐的Image组件（适配性更好） #

首先导入内置Image组件：
import Image from 'next/image'
再替换原有img标签：

<div className="fixed top-0 right-0 p-4">
  <Image
    alt="logo"
    src="/svg/logo_white.svg"
    width={48}
    height={48}
    className="h-12 w-auto transition duration-200 filter drop-shadow"
  />
</div>

排查验证方式 #

如果修复后仍有问题，可打开浏览器开发者工具验证：

• 查看「元素」面板的img标签是否存在，宽高属性是否正常，排除被其他元素遮挡、透明度设置为0的情况
• 查看「网络」面板的svg资源请求状态，返回404则确认是资源路径配置问题，返回200则是样式渲染问题

内容的提问来源于stack exchange，提问作者Hajimaru