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

Posted 2023-03-06

【中文标题】如何直接设置 <Image /> 组件的边距？ [复制]

【英文标题】：How to set the margins of the <Image /> component directly? [duplicate]

【发布时间】：2021-09-28 00:24:52

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

.header > div 
   margin-left: 2em;

【讨论】：

感谢您的提示和澄清！

【参考方案2】：

我认为使用 styled-components 是一种不错的方式。

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 />

【参考方案3】：

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

【参考方案4】：

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

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

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