如何直接设置<Image />组件的边距？

如何解决如何直接设置<Image />组件的边距？

我使用 Next.js <Image /> 组件在我的标题中加载徽标。我想将组件定位在标题中。简而言之，我需要指定它的边距。

    <div className={styles.header}>
      <Image src={logo} alt="logo" />
      <nav>navbar</nav>
      <ul>
        <li>opt1</li>
        <li>opt2</li>
        <li>opt3</li>
      </ul>
    </div>

我知道我可以简单地将 <Image /> 放在一个定位块中，但是有没有办法直接做到这一点？

解决方法

不，没有。您可以通过将 className 属性传递给 next/image 来修改许多属性。但由于边距与包装器相关，因此修改它对您没有帮助。

您要执行的操作需要在由 img 插入 next/image 标记的包装器上设置样式，这目前是不可能的（直接）。 参见this discussion以获得更好的洞察力。

但是，作为一种解决方法（针对您的特定情况），您可以在标题上设置选择包装器 div 的样式。参考：CSS Combinators

.header > div {
   margin-left: 2em;
}

,

我认为使用样式组件是一种很好的方式。

import Image from 'next/image';
import styled from 'styled-components';


const StyledImage = styled(Image)`
  /* your custom style */
  margin: 10px;
`;

and using it: <StyledImage src={image_path} />

,

正如 Image 组件上的 nextjs documentation 所说，您可以像使用常用元素一样使用 className 来设置样式。

,

您可以将类名应用于 <Image/> 组件。例如

<Image
  className="dummy-name" 
  src={src} 
  width={2400} 
  height={1598} 
  layout="responsive"/>

Documentation 列出了一些有用的属性。