嗨,我正在使用 next js 和 tailwind css 开发一个项目。我想将此图像居中,但下一个 js 似乎忽略了 flex 和 justify-center,如图所示。
我想动态地将位置传递给(例如justify-start,justify-end)。任何帮助表示赞赏。
import NextImage from '@components/image-copy'
function test() {
return (
<div className="w-full bg-red-400">
<NextImage
src="/images/billboard-corner.webp"
url={'www.facebook.com'}
layoutFill={true}
wrapper="h-60 w-1/2 bg-red-100 relative flex justify-center"
/>
</div>
)
}
export default test
这是我的图像组件。
import Link from 'next/link'
import Image from 'next/image'
const NextImage = ({
src,
alt,
className,
linkType = 'undef',
target,
url,
draggable,
width,
height,
wrapper,
position,
layoutFill,
}) => {
const style = `${wrapper} relative `
return (
<>
{layoutFill ? (
linkType === 'link' ? (
<div className={style}>
<Link href={url}>
<a>
<Image src={src} alt={alt} layout="fill" draggable={draggable} className={className} />
</a>
</Link>
</div>
) : (
linkType === 'undef' && (
<>
<div className={style}>
<Image src={src} alt={alt} layout="fill" draggable={draggable} className={className} />
</div>
</>
)
)
) : <div>Example</div>
}
</>
)
}
导出默认 NextImage