如何解决Next.js 13 <Image/>组件搭配Tailwind CSS的常见控制台报错问题

return (<Image/>)

嘿，我看你遇到了Next.js 13 Image组件和Tailwind CSS搭配的控制台报错，还不想关闭Tailwind的Preflight，这就给你一步步捋清楚问题所在，帮你搞定！

首先看你贴的代码，有两个很明显的错误，这大概率就是控制台报错的根源：

• 组件名称大小写错误：Next.js的Image组件是React组件，JSX规范里组件必须大写开头，你写的<image/>会被浏览器当成原生的HTML图片标签，完全不是一回事，肯定会出问题！得改成<Image/>。
• 动态属性写法错误：你给src、alt这些属性加了引号包裹大括号，比如src="{img}"，这会把{img}当成字符串字面量，而不是读取img变量的值，导致图片路径直接变成字符串{img}，肯定加载失败。正确的写法是去掉引号，直接写src={img}。

先把代码修正成这样：

// 别忘了先导入Image组件！
import Image from 'next/image';

<div className="">
  <Image
    src={img}
    alt={name}
    width={100}
    height={100}
  />
</div>

接下来说说Tailwind Preflight的问题，你不想关掉它是对的，Preflight的样式重置能帮我们消除浏览器默认样式差异。如果修正代码后还有样式相关的异常（比如图片显示变形、间距不对），可以直接给Image组件加Tailwind的类来调整，比如：

• 想让图片自适应容器同时保持比例：加className="object-cover w-full h-full"
• 调整图片间距：给外层div加className="p-2"之类的类

另外再提醒两个常见的坑，避免后续再踩：

• 如果是本地静态图片，要放在项目根目录的public文件夹里，比如public/avatar.png，那img变量就是/avatar.png；
• 如果是远程图片，得在next.config.js里配置允许的域名，比如：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      domains: ['example.com'], // 替换成你的图片域名
    },
  };
  
  module.exports = nextConfig;
  

修正完这些，控制台的报错应该就能解决啦，而且完全不用关闭Tailwind的Preflight~

备注：内容来源于stack exchange，提问作者GabVlado