React：如何定位加载组件，使其位于图像的中心

Joji 发表于 Dev

九次

这是代码和演示：

https://codesandbox.io/s/sparkling-silence-7cv3l

https://7cv3l.csb.app/

我使用了react-image-enlarger用于缩放图像（例如中号）的组件。它具有一个API，renderLoading可在下载放大的图像时呈现加载组件。因此，我导入react-loading了加载组件。

相关代码段：

<div style={{ margin: "0.25rem" }}>
      <Image
        style={{ width: "200px", height: "auto" }}
        zoomed={zoomed}
        src={src}
        enlargedSrc={{}}
        onClick={() => setZoomed(true)}
        onRequestClose={() => setZoomed(false)}
        renderLoading={<ReactLoading type={"cylon"} color="black" />}
      />
    </div>

现在，加载动画出现在图像下方。

但是我希望加载动画位于图像的中心，并且应该对图像应用滤镜以使其更暗（也许brightness(0.7);）

我认为这不是一件容易的事，因为每个图像都有自己的高度和宽度，而且我不太擅长CSS，因此可以提供任何帮助。

科迪普·科拉迪亚

尝试使用此css代码将加载程序的位置设置在将起作用的每个图像的中心。

img.EnlargedImage__Image + div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.75);
    height: 100% !important;
    width: 100% !important;
}
img.EnlargedImage__Image + div svg {
    height: 64px;
    width: 64px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。