如何将NextJS Image组件定位到Material UI Box容器左边缘？

在NextJS项目中使用Image组件并嵌套在Material UI的Box组件内，希望将图片定位到父容器（Box）的左边缘，但图片在宽度方向自动居中，导致导航栏内边距错乱。

当前代码：

<Box
    border="1px dashed white"
    position="relative"
    width="250px"
    height="84px"
    display="flex"
    justifyContent="flex-start"
>
    <Image
        fill
        objectFit="contain"
        alt="Black Diasporer logo"
        src="/black_diasporer_logo.png"
    />
</Box>

问题截图：

解决方案 #

方法一：修改Image的objectPosition属性 #

使用fill属性时，NextJS Image默认会将图片在容器内居中（objectPosition默认值为center），此时父容器的flex布局设置不会影响它。只需添加objectPosition属性指定靠左对齐：

<Box
    border="1px dashed white"
    position="relative"
    width="250px"
    height="84px"
    display="flex"
    justifyContent="flex-start"
>
    <Image
        fill
        objectFit="contain"
        objectPosition="left center" // 关键：设置图片靠左垂直居中
        alt="Black Diasporer logo"
        src="/black_diasporer_logo.png"
    />
</Box>

方法二：移除fill属性，让Image参与flex布局 #

放弃fill，直接给Image设置宽高，让它成为flex容器的子元素，此时父容器的justifyContent:flex-start会生效：

<Box
    border="1px dashed white"
    width="250px"
    height="84px"
    display="flex"
    justifyContent="flex-start"
    alignItems="center" // 可选：让图片垂直居中
>
    <Image
        width="auto" // 自适应宽度，也可设固定值如200px
        height="100%"
        objectFit="contain"
        alt="Black Diasporer logo"
        src="/black_diasporer_logo.png"
    />
</Box>

原因说明 #

当使用fill属性时，NextJS Image会被设置为绝对定位，脱离了父容器的flex布局流，因此父容器的justifyContent设置无法影响它。此时需要通过objectPosition控制图片在容器内的位置；如果让Image参与flex布局，父容器的flex属性就能直接控制图片的对齐方式。

内容的提问来源于stack exchange，提问作者Jevon Cochran