下一个 JS 图像，我无法使用顺风使图像位置居中

Posted 2023-03-06

【中文标题】下一个 JS 图像，我无法使用顺风使图像位置居中

【英文标题】：Next JS Image, I cant make the image position to center using tailwind

【发布时间】：2021-07-01 16:33:35

【问题描述】：

您好，我正在使用 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

【参考方案1】：

您的图片应该是正确的，因为您使用的是 w-1/2（宽度的 50%）

如果您不希望它达到 50%，您可以删除 w-1/2，或者使用 w-full