Next.js 通过 css 设置图像样式

Question

我这里有下一个 JS 组件：

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

export const Navbar = () => {
    <div>
        <Image className={styles["navbar-home-icon"]} src="/vercel.svg"/>
    </div>
}

Navbar.module.css：

.navbar-home-icon {
    width: 60px;
    height: 60px;
    border: 5px solid red;
}

问题是，我无法使用该类navbar-home-icon来设置图像的宽度和高度。连边框都没有显示出来。它抛出这个错误

错误：带有 src“/vercel.svg”的图像必须使用“width”和“height”属性或“layout='fill'”属性

我知道正在检测 css 文件，因为这是开发人员视图中显示的内容：

height如果我将和属性添加width到标签本身中，则会显示图像。

我明白错误是什么，但是如何通过 css 文件控制宽度/高度/任何其他属性？- 而不是在图像标签内明确声明它们？

Answer 1

将 Image 放入 div 中，并在 Image 上放置以下 props：

\n

<div className="div-class">\n   <Image src=\xe2\x80\x9c/vercel.svg\xe2\x80\x9d layout="fill" objectFit="cover" />\n</div>\n

\n