把这个添加到你的css文件中。

img {
  border-radius: 50%;
}

答：

<Image src={props.profilePictureURL}  className={styles.makeImageCircular} height={200} width={200} alt='IMG2'/>

其中：

.makeImageCircular {
  border-radius:50%;
}

• 错误地将50%设置为'50%'（在CSS中的字符串中）

@rodrigodh的答案似乎使你的img元素的ALL完全舍入，这在现实世界的场景中可能被认为是不好的做法（取决于你的用例）。如果这不是你想要的效果，你可以将inline style添加到一个特定的Next.js Image组件中：

style={{ borderRadius: '50%', overflow: 'hidden', width: 24, height: 24 }}

@421的答案似乎使用了SCSS，其中使用了styles prop 。同样，如果你不使用这种方法，你可以只使用内联样式或以任何你喜欢的方式使用你的CSS。
在Image组件的Next.js docs上，它们使用内联样式，但通过一个命名变量将对象传递给Image上的自定义style prop，如下所示：

const imageStyle = {
  borderRadius: '50%',
  border: '1px solid #fff',
};
 
export default function ProfileImage() {
  return <Image src="..." style={imageStyle} />;
}

但请注意，您可能需要
溢出：'hidden'
这取决于你的Next.js版本（这里不能太具体，我在13.1.6上，我确实需要它）。height和width样式也是经常需要的，即使这些属性被添加到Image组件本身（并且是requiredprops，以及“alt”）。
如果你使用TailwindCSS，也可以这样做：

className='rounded-full overflow-hidden w-[24px] h-[24px]'

作为TailwindCSS的一个脚注，上次我尝试Next.js文档方法时，我似乎无法在使用MantineUI时将其提供的内联样式用于13.1.6，所以我使用这种方法并将Image Package 在周围的div中：

<div className='flex items-center'>
  {users?.map((user: User) => {
    return <div
      key={id}
      className='border-2 border-indigo-500 rounded-full overflow-hidden w-[28px] h-[28px]'
    >
      <Image
        width={24}
        height={24}
        src={user.photo}
        alt='user_photo'
      />
    </div>
  })}
</div>

祝你好运!- 一个开发人员已经有这个问题。