Next.js Image组件如何通过CSS类设置宽高及其他样式不报错

开发者阿泽

2026-9-29

解决方法

Next.js的Image组件默认要求显式声明宽高属性，要实现纯CSS控制尺寸和样式，采用父容器+fill模式的方案即可，适配所有版本的实现方式如下：

1. 组件代码调整

Next.js 12及更早版本（旧版Image组件）

import styles from '../styles/Navbar.module.css'
import Image from 'next/image'

export const Navbar = () => {
    // 注意：原代码缺少return语句，必须补全才能正常渲染组件
    return (
        <div className={styles["navbar-home-wrapper"]}>
            <Image 
                className={styles["navbar-home-icon"]} 
                src="/vercel.svg"
                layout="fill"
                alt="首页图标"
            />
        </div>
    )
}

Next.js 13及更高版本（新版Image组件）

仅需把layout="fill"替换为fill属性即可，其余代码和上面一致：

<Image 
    className={styles["navbar-home-icon"]} 
    src="/vercel.svg"
    fill
    alt="首页图标"
/>

2. CSS代码调整

/* 父容器控制尺寸，必须设置相对定位 */
.navbar-home-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
}

/* 图片样式可自定义任意CSS属性 */
.navbar-home-icon {
    border: 5px solid red;
    /* 按需设置object-fit控制图片缩放裁剪规则 */
    object-fit: contain;
}