如何使用nextjs Image创建圆形图像?我发现,解决方案涉及 Package 图像在div与边界半径和隐藏溢出是不工作的。
import Image from 'next/image' <Image src={props.profilePictureURL} height={200} width={200} alt='IMG2'/>
lh80um4z1#
把这个添加到你的css文件中。
img { border-radius: 50%; }
m4pnthwp2#
答:
<Image src={props.profilePictureURL} className={styles.makeImageCircular} height={200} width={200} alt='IMG2'/>
其中:
.makeImageCircular { border-radius:50%; }
q1qsirdb3#
@rodrigodh的答案似乎使你的img元素的ALL完全舍入,这在现实世界的场景中可能被认为是不好的做法(取决于你的用例)。如果这不是你想要的效果,你可以将inline style添加到一个特定的Next.js Image组件中:
img
style={{ borderRadius: '50%', overflow: 'hidden', width: 24, height: 24 }}
@421的答案似乎使用了SCSS,其中使用了styles prop 。同样,如果你不使用这种方法,你可以只使用内联样式或以任何你喜欢的方式使用你的CSS。在Image组件的Next.js docs上,它们使用内联样式,但通过一个命名变量将对象传递给Image上的自定义style prop,如下所示:
styles
Image
style
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
<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>
祝你好运!- 一个开发人员已经有这个问题。
3条答案
按热度按时间lh80um4z1#
把这个添加到你的css文件中。
m4pnthwp2#
答:
其中:
q1qsirdb3#
@rodrigodh的答案似乎使你的
img
元素的ALL完全舍入,这在现实世界的场景中可能被认为是不好的做法(取决于你的用例)。如果这不是你想要的效果,你可以将inline style添加到一个特定的Next.js Image组件中:@421的答案似乎使用了SCSS,其中使用了
styles
prop 。同样,如果你不使用这种方法,你可以只使用内联样式或以任何你喜欢的方式使用你的CSS。在Image组件的Next.js docs上,它们使用内联样式,但通过一个命名变量将对象传递给
Image
上的自定义style
prop,如下所示:但请注意,您可能需要
溢出:'hidden'
这取决于你的Next.js版本(这里不能太具体,我在13.1.6上,我确实需要它)。height和width样式也是经常需要的,即使这些属性被添加到
Image
组件本身(并且是requiredprops,以及“alt”)。如果你使用TailwindCSS,也可以这样做:
作为TailwindCSS的一个脚注,上次我尝试Next.js文档方法时,我似乎无法在使用MantineUI时将其提供的内联样式用于13.1.6,所以我使用这种方法并将
Image
Package 在周围的div
中:祝你好运!- 一个开发人员已经有这个问题。