React 中 antd Image 组件之间的间距答案

【问题标题】：Spacing between antd Image components in ReactReact 中 antd Image 组件之间的间距
【发布时间】：2021-11-16 11:17:21
【问题描述】：

我正在使用 antd 的 Image 组件，因为我想要它具有的预览功能，但是当我尝试在我的图像之间添加一些空间时，样式没有生效。它们只是堆叠在一起，没有空间。当我使用<img> 标签时，同样的事情也有效。有关如何解决此问题的任何见解？

<div>
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
</div>

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您可以利用 AntD 的 Space 组件。

<Space size={15}>
  <Image src={image} />
  <Image src={image} />
  <Image src={image} />
</Space>

【讨论】：

【解决方案2】：

根据Image 组件API，该组件不采用 style 属性。

我建议使用包装器组件来应用margin-right: 15px; 规则。

<div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
</div>

【讨论】：